Liferay 前端性能調優(4) 打包artifact時候啓用yui-compressor

上一章節咱們介紹了，從瀏覽器向服務器獲取資源時候，能夠經過Gzip讓瀏覽器拿到的是壓縮的資源從而減小網絡下載時間，那麼咱們可否從源頭上考慮呢，就是咱們從源頭（資源自己）讓資源儘量的小。

辦法固然是有的，通常資源有css,js,p_w_picpath，咱們的思路是，對於css,js，咱們用yui-compressor來對其進行壓縮，對於p_w_picpath，咱們將他們sprite成單個的大圖從而減小網絡請求次數。

yui-compressor，相信不少人都不陌生，它能夠專門來壓縮css,js，通常會去除其中的註釋，空白行，合併語義相近的行等等，這裏就不在贅述了。咱們由於構建分發包使用的都是maven,因此咱們就用maven的yui-compressor插件來完成這個任務。

具體配置以下：

只要在咱們的pom文件的<plugins>中加一個<plugin>以下：

...
<plugin>
                                    <groupId>net.alchim31.maven</groupId>
<artifactId>yuicompressor-maven-plugin</artifactId>
<version>${yui-compress-version}</version>
 <executions>
    <execution>                                                <phase>prepare-package</phase>
      <goals>                                                   <goal>compress</goal>
      </goals>
                                                <configuration>
                                                        <nosuffix>true</nosuffix>
                                                        <jswarn>false</jswarn>
                                                </configuration>
        </execution>
   </executions>
        </plugin>
 <plugin>
                                <groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
                                <version>${plugin.war.version}</version>
      <configuration>
                                        <warSourceExcludes>js/**, css/**</warSourceExcludes>
      </configuration>
  </plugin>
</plugins>

而後咱們運行的時候，就會自動看到在編譯，單元測試完會執行壓縮，最後在打包，由於咱們這個yuicompressor-maven-plugin 定義在maven-war-plugin 以前的：

從這裏咱們能夠顯著的看出來，大多數js資源文件都有不一樣程度的壓縮。

測試：

那麼到真實服務器上去訪問這些資源是否還這樣呢？咱們作個比較：

在壓縮前：

在壓縮後：

顯然，全部請求的資源文件都變小了，速度也提升了。