Java 웹 애플리케이션에 대한 Javascript 축소를 어떻게 자동화합니까?
Java 웹 앱의 Javascript 축소를 자동화하는 방법을 듣고 싶습니다. 특히 관심이있는 몇 가지 측면이 있습니다.
- 어떻게 통합됩니까? 빌드 도구, 서블릿 필터, WAR 파일을 후 처리하는 독립형 프로그램 등의 일부입니까?
- 그것은가 가능하기 쉽고 사용 안 함 ? 축소 된 스크립트를 시도하고 디버깅하는 것은 매우 재밌지 만, 개발자가 축소가 아무 것도 깨지지 않는지 테스트 할 수있는 것도 유용합니다.
- 투명하게 작동합니까 , 아니면 일상적인 작업에서 고려해야 할 부작용 (최소화 된 것 이외의 부작용)이 있습니까?
- 어떤 축소기를 사용합니까?
- 그것은 않습니다 어떤 기능이 부족 당신이 생각할 수있는?
- 그것에 대해 무엇을 좋아합니까?
- 당신은 그것에 대해 무엇을 좋아하지 않습니까?
이것은 주로 미래의 프로젝트에 대한 참조로 사용되며 (다른 SOer도 유익한 정보를 얻을 수 있기를 바랍니다) 모든 종류의 도구가 흥미 롭습니다.
( 이것은 어떤 축소 기가 가장 좋은지에 대한 질문이 아닙니다 . 우리는 이미 주변에 많은 것들이 있습니다.)
반올림 게시물
이 글타래에 새로운 글을 올리려면,이 글을 편집하여 내 글에 연결하십시오.
- 개미
apply작업 (YUI Compressor 사용) - 사용자 정의 YUI 압축기 Ant 태스크
- Maven YUI Compressor 플러그인
- 과립 (JSP, JSF, Grails, Ant 용)
- Google Closure 컴파일러 용 Ant 매크로
- wro4j (Maven, 서블릿 필터, 일반 Java 등)
- ant-yui-compressor (JS + CSS 압축을위한 개미 작업)
- JAWR
- 메이븐 플러그인 축소
- 혹
프로덕션 빌드 중에 YUICompressor로 js 파일을 축소하고 결과를 별도의 폴더에 저장하기 위해 Ant 태스크를 사용하고 있습니다. 그런 다음 해당 파일을 웹 서버에 업로드합니다. 이 블로그에서 YUI + Ant 통합 에 대한 좋은 예를 찾을 수 있습니다 .
예를 들면 다음과 같습니다.
<target name="js.minify" depends="js.preprocess">
<apply executable="java" parallel="false">
<fileset dir="." includes="foo.js, bar.js"/>
<arg line="-jar"/>
<arg path="yuicompressor.jar"/>
<srcfile/>
<arg line="-o"/>
<mapper type="glob" from="*.js" to="*-min.js"/>
<targetfile/>
</apply>
</target>
작업에 가장 적합한 도구 중 하나는 wro4j 라고 생각 합니다. https://github.com/wro4j/wro4j
필요한 모든 것을 수행합니다.
- 프로젝트 웹 리소스 (js 및 CSS)를 잘 정리
- 런타임 (간단한 필터 사용) 또는 빌드 타임 (maven 플러그인 사용)에서 병합 및 축소
- 무료 및 오픈 소스 : Apache 2.0 라이센스로 출시
- wro4j에서 지원하는 몇 가지 축소 도구 : JsMin, Google Closure compressor, YUI 등
- 사용하기 매우 쉽습니다. 서블릿 필터, 일반 Java 또는 스프링 구성 지원
- 자바 스크립트 및 CSS 메타 프레임 워크 지원 : CoffeeScript, Less, Sass 등
- 유효성 검사 : JSLint, CSSLint 등
프로덕션 모드뿐만 아니라 디버그에서도 실행할 수 있습니다. 처리 / 전처리해야하는 모든 파일을 지정하고 나머지는 수행하십시오.
다음과 같이 병합, 축소 및 압축 리소스를 간단히 포함 할 수 있습니다.
<script type="text/javascript" src="wro/all.js"></script>
Google Closure 컴파일러 및 Yahoo 압축기에 대한 개미 매크로를 작성 했으며이 파일을 다른 웹 프로젝트에 포함시킵니다.
<?xml version="1.0" encoding="UTF-8"?>
<!-- CSS and JS minifier. -->
<!DOCTYPE project>
<project name="minifier" basedir=".">
<property name="gc" value="compiler-r1592.jar" />
<property name="yc" value="yuicompressor-2.4.6.jar" />
<!-- Compress single js with Google Closure compiler -->
<macrodef name="gc-js">
<attribute name="dir" />
<attribute name="src" />
<sequential>
<java jar="${gc}" fork="true">
<!--
- - compilation_level WHITESPACE_ONLY | SIMPLE_OPTIMIZATIONS | ADVANCED_OPTIMIZATIONS
Specifies the compilation level to use. Default: SIMPLE_OPTIMIZATIONS
- - warning_level QUIET | DEFAULT | VERBOSE
Specifies the warning level to use.
-->
<arg line="--js=@{dir}/@{src}.js" />
<arg line="--js_output_file=@{dir}/@{src}-min-gc.js" />
</java>
</sequential>
</macrodef>
<!-- Compress single js with Yahoo compressor -->
<macrodef name="yc-js">
<attribute name="dir" />
<attribute name="src" />
<sequential>
<java jar="${yc}" fork="true">
<arg value="@{dir}/@{src}.js" />
<arg line="-o" />
<arg value="@{dir}/@{src}-min-yc.js" />
</java>
</sequential>
</macrodef>
<!-- Compress all js in directory with Yahoo compressor -->
<macrodef name="yc-js-all">
<attribute name="dir" />
<sequential>
<apply executable="java" parallel="false">
<fileset dir="@{dir}" includes="*.js" excludes="*-min*.js" />
<arg line="-jar" />
<arg path="${yc}" />
<srcfile />
<arg line="-o" />
<mapper type="glob" from="*.js" to="@{dir}/*-min-yc.js" />
<targetfile />
</apply>
</sequential>
</macrodef>
<!-- Compress all css in directory with Yahoo compressor -->
<macrodef name="yc-css-all">
<attribute name="dir" default="${build.css.dir}" />
<sequential>
<apply executable="java" parallel="false">
<fileset dir="@{dir}" includes="*.css" excludes="*-min*.css" />
<arg line="-jar" />
<arg path="${yc}" />
<arg line="-v --line-break 0" />
<srcfile />
<arg line="-o" />
<mapper type="glob" from="*.css" to="@{dir}/*-min.css" />
<targetfile />
</apply>
</sequential>
</macrodef>
</project>
통합 :
<import file="build-minifier.xml" />build.xml에서 일반적인 개미 작업으로 호출하십시오.<gc-js dir="${build.js.dir}" src="prototype" /><yc-js-all dir="${build.js.dir}" />두 가지 축소 기 중 하나를 선택하십시오. Google Closure 컴파일러와 Yahoo 압축기는 수동으로 다운로드하여 xml 파일 근처에 배치해야합니다.
축소 기는 이미 압축 파일을 건너 뜁니다 (로 끝나는
-min*)Usually I make three versions of script: uncompressed (e.g.
prototype.js) for debugging, compressed with closure compiler (prototype-min-gc.js) for production server, compressed with Yahoo (prototype-min-yc.js) for troubleshooting because closure compiler uses risky optimizations and sometimes produces invalid compressed file and Yahoo compressor is more safeYahoo compressor can minify all files in a dir with single macro, Closure compiler cannot
I tried two ways:
- using a servlet filter. When in production mode, the filter is activated and it compress any data bounded to URL like *.css or *.js
- using maven and yuicompressor-maven-plugin; the compression is perfomed una-tantum, (when assembling the production war)
Of course the latter solution is better since it does not consume resources at runtime (my webapp is using google app engine) and it doesn't complicate your application code. So assume this latter case in the following answers:
How does it integrate? Is it part of your build tool, a servlet filter, a standalone program post-processing the WAR file, or something else?
using maven
Is it easy to enable and disable? It's very unfunny to try and debug a minified script, but it's also useful for a developer to be able to test that the minification doesn't break anything.
you activate it only when assemblying the final war; in development mode you see the uncompressed version of your resources
Does it work transparently, or does it have any side effects (apart from the ones inherent in minification) that I have to consider in my day-to-day work?
absolutely
Which minifier does it use?
YUI compressor
Does it lack any features that you can think of?
no, it is very complete and easy to use
What do you like about it?
it is integrated with my favourite tool (maven) and the plugin is in the central repository (a good maven citizen)
I think you need a compression library, for example Granule tag.
http://code.google.com/p/granule/
It gzip and combine javascripts wrapped by g:compress tag using different methods, also has Ant task as well
code sample is:
<g:compress>
<script type="text/javascript" src="common.js"/>
<script type="text/javascript" src="closure/goog/base.js"/>
<script>
goog.require('goog.dom');
goog.require('goog.date');
goog.require('goog.ui.DatePicker');
</script>
<script type="text/javascript">
var dp = new goog.ui.DatePicker();
dp.render(document.getElementById('datepicker'));
</script>
</g:compress>
...
I'm really surprised no one mentioned JAWR - https://j-a-w-r.github.io
It's pretty mature and supports all standard features that are to be expected, and a bit more. Here is how it holds against the OP's excellent criteria.
How does it integrate? Is it part of your build tool, a servlet filter, a standalone program post-processing the WAR file, or something else?
It originally did the processing/heavy-lifting at application startup and serving was based on a servlet. Starting with 3.x they added support for integrating at build time.
Support for JSP and Facelets is provided through a custom JSP tag library to import processed resources. In addition to that, a JS resources loader is implemented which supports loading the resources from static HTML pages.
Is it easy to enable and disable? It's very unfunny to try and debug a minified script, but it's also useful for a developer to be able to test that the minification doesn't break anything.
A debug=on option is available to use before application startup, and a custom GET parameter can be specified at individual requests in production to toggle debug mode selectively at runtime for said request.
Which minifier does it use?
For JS it supports YUI Compressor and JSMin, for CSS I'm not sure.
Does it lack any features that you can think of?
SASS support comes to mind. That said, it does support LESS.
Our project has handled it a number of ways but we have continued to use the YUI Compressor through our different iterations.
We initially had a servlet handle the compression for JavaScript the first time that particular file was accessed; it was then cached. We already had a system in place to handle custom property files so we simply updated our configuration files to support enabling or disabling the compressor depending on the environment we were working in.
Now the development environments never use compressed JavaScript for debugging purposes. Instead we handle the compression in our build process when exporting our application to a WAR file.
Our client has never raised concerns about the compression and the developers don't notice it until they decide to debug JavaScript. So I'd say it's rather transparent with minimal, if any, side affects.
This worked for me: https://bitbucket.org/m6_russell_francis/yui-compressor-ant-task/wiki/Home
<!-- minimize all static *.css & *.js content -->
<target name="static-content-minify">
<taskdef name="yuicompressor"
classname="com.metrosix.yuicompressor.anttask.YuiCompressorTask">
<classpath>
<pathelement location="${jar.yui.compressor}"/>
<pathelement location="${jar.yui.anttask.compressor}" />
</classpath>
</taskdef>
<yuicompressor todir="${build.static.content.min}" charset="utf-8"
preserveallsemicolons="true" munge="true" >
<fileset dir="${src.static.content}">
<include name="**/*.css"/>
<include name="**/*.js"/>
</fileset>
</yuicompressor>
</target>
I'm writing a framework for managing web assets, called humpty. It aims to be simpler and more modern than jawr or wro4j by using WebJars and ServiceLoaders.
How does it integrate? Is it part of your build tool, a servlet filter, a standalone program post-processing the WAR file, or something else?
In development, a servlet processes the assets as necessary. The assets would then be pre-compiled before production and placed in a public folder, so that the only part that is used is generating the correct includes in the HTML.
Is it easy to enable and disable? It's very unfunny to try and debug a minified script, but it's also useful for a developer to be able to test that the minification doesn't break anything.
That would be done by switching between development and production modes.
Does it work transparently, or does it have any side effects (apart from the ones inherent in minification) that I have to consider in my day-to-day work?
I believe it is transparent, but does strongly favour the use of WebJars.
Which minifier does it use?
Whichever one the plugin you put on your classpath uses. Currently looking at writing a plugin for the Google Closure Compiler.
Does it lack any features that you can think of?
Still pre-release, though I'm using it in production. The maven plugin still needs a lot of work.
What do you like about it?
The simplicity of just adding a dependency to configure the framework
What don't you like about it?
It's my baby, I love it all ;)
'Programing' 카테고리의 다른 글
| 안드로이드 장치에서 로그 파일을 얻는 방법은 무엇입니까? (0) | 2020.07.14 |
|---|---|
| Android Studio 실행 오류 (0) | 2020.07.14 |
| 필드 정렬이 기본 유형인지 사용자 정의인지에 따라 구조체 정렬이 왜 달라 집니까? (0) | 2020.07.13 |
| HTTP 응답 헤더에서 컨텐츠 처리 사용 (0) | 2020.07.13 |
| const-reference로 std :: function을 전달해야합니까? (0) | 2020.07.13 |