前端代码优化： 使用YUI Compressor

通过压缩组件，可以显著减少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引进所有其他文件。后期压缩的时候，将所有代码压缩进该文件。

 

看看复杂一点的需求：

1. 先压缩文件，并排除部分已压缩的文件。
2. 合并已压缩文件，并排除部分不需要合并的文件。
3. 将压缩好的文件放到指定文件夹。

 

先看看合并的基本配置：

<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.



}