前端代碼優化： 使用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.

}