通过压缩组件，可以显著减少HTTP请求和响应事件。这也是减小页面大小最简单的技术，但也是效果最明显的。
压缩JS，CSS代码有几种常用插件，YUI Compressor是个不错的选择。通过maven的YUI Compressor plugin可以方便的压缩项目中的前端代码。最简单便是将所有的文件一一压缩，看下pom.xml的配置：
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>KUI_demo</groupId> <artifactId>KUI_demo</artifactId> <version>1.0</version> <packaging>jar</packaging> <build> <plugins> <plugin> <groupId>net.alchim31.maven</groupId> <artifactId>yuicompressor-maven-plugin</artifactId> <version>1.3.0</version> <executions> <execution> <!-- YUI Compressor has two goals: compress and jslint --> <goals> <goal>compress</goal> </goals> </execution> </executions> <configuration> <failOnWarning>false</failOnWarning> <!-- Break contiguous output at this column number. --> <!-- If this is zero, you will get line breaks after every line in the aggregated file. --> <linebreakpos>-1</linebreakpos> <!-- Set your own suffix. [default: "-min"]--> <nosuffix>true</nosuffix> </configuration> </plugin> </plugins> <resources> <resource> <directory>${basedir}/webapp</directory> <includes> <include>**/*.js</include> <include>**/*.css</include> </includes> </resource> </resources> </build> </project>
更进一步，将所有文件合并到同一个文件，可以减少HTTP请求。由于项目开发阶段并不会压缩所有代码，因此，可以采取通过一个JS引进所有其他文件。后期压缩的时候，将所有代码压缩进该文件。
看看复杂一点的需求：
- 先压缩文件，并排除部分已压缩的文件。
- 合并已压缩文件，并排除部分不需要合并的文件。
- 将压缩好的文件放到指定文件夹。
先看看合并的基本配置：
<project> ... <build> <plugins> ... <plugin> <groupId>net.alchim31.maven</groupId> <artifactId>yuicompressor-maven-plugin</artifactId> <executions> <execution> <goals> <goal>compress</goal> </goals> </execution> </executions> <configuration> <nosuffix>true</nosuffix> <aggregations> <aggregation> <!-- remove files after aggregation (default: false) <removeIncluded>true</removeIncluded> --> <!-- insert new line after each concatenation (default: false) --> <insertNewLine>true</insertNewLine> <output>${project.build.directory}/${project.build.finalName}/static/all.js</output> <!-- files to include, path relative to output‘s directory or absolute path--> <!--inputDir>base directory for non absolute includes, default to parent dir of output</inputDir--> <includes> <include>${basedir}/src/licenses/license.js</include> <include>**/*.js</include> </includes> <!-- files to exclude, path relative to output‘s directory <excludes> <exclude>**/*.pack.js</exclude> <exclude>**/compressed.css</exclude> </excludes> --> </aggregation> </aggregations> </configuration> </plugin> ... </plugins> </build> ... </project>
注意aggregation的inputDir非常重要，它默认为outputDir的上一层。并且aggregation的动作是在yuicompression之后的。因此，上面的配置实际上是先将代码压缩到${project.build.directory}/${project.build.finalName}目录下再进行aggregation。
<configuration> <!-- exclude file witch not need to compress --> <excludes> <exclude>**/*.min.js</exclude> <exclude>**/KUI.js</exclude> </excludes> <includes> <include>**/*.js</include> <include>**/*.css</include> </includes> <linebreakpos>-1</linebreakpos> <nosuffix>false</nosuffix> <suffix>.min</suffix> <preProcessAggregates>false</preProcessAggregates> <preserveAllSemicolons>true</preserveAllSemicolons> <failOnWarning>false</failOnWarning> <aggregations> <!-- JS concatenation --> <aggregation> <inputDir>${project.build.directory}</inputDir> <!-- Insert a new line after each concatenation. --> <insertNewLine>true</insertNewLine> <removeIncluded>false</removeIncluded> <!-- Pathname of final output. --> <output>${basedir}/webapp/KUI.min.js</output> <!-- Files to include, path relative to output directory OR absolute path --> <includes> <inlcude>**/*.min.js</inlcude> </includes> <excludes> <exclude>**/KUI.js</exclude> <exclude>**/KUI.min.js</exclude> </excludes> </aggregation> <!-- CSS concatenation --> <aggregation> <inputDir>${project.build.directory}</inputDir> <!-- Pathname of final output. --> <output>${basedir}/webapp/content.min.css</output> <!-- Files to include, path relative to output directory OR absolute path --> <includes> <include>**/*.min.css</include> </includes> </aggregation> <excludes> <exclude>**/content.min.css</exclude> </excludes> </aggregations> </configuration>
还有一点要注意，如果对象的属性名为Javascript的保留字，并且没有用引号引住属性名，那么在压缩的时候会抛出错误。
var test = { long : “test” // throw error when compress } var test = { “long” : “test” // correct. }