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

餘二五發表於2017-11-15
前端UI

上一章節我們介紹了，從瀏覽器向伺服器獲取資源時候，可以通過Gzip讓瀏覽器拿到的是壓縮的資源從而減少網路下載時間，那麼我們能否從源頭上考慮呢，就是我們從源頭（資源本身）讓資源儘可能的小。


辦法當然是有的，一般資源有css,js,image，我們的思路是，對於css,js，我們用yui-compressor來對其進行壓縮，對於image，我們將他們sprite成單個的大圖從而減少網路請求次數。


yui-compressor，相信很多人都不陌生，它可以專門來壓縮css,js，一般會去除其中的註釋，空白行，合併語義相近的行等等，這裡就不在贅述了。我們因為構建分發包使用的都是maven,所以我們就用maven的yui-compressor外掛來完成這個任務。


具體配置如下：

只要在我們的pom檔案的<plugins>中加一個<plugin>如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
<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 之前的：

134645653.png

從這裡我們可以顯著的看出來，大多數js資原始檔都有不同程度的壓縮。



測試：

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


在壓縮前：

134823947.png


在壓縮後：

134838275.png


顯然，所有請求的資原始檔都變小了，速度也提高了。

本文轉自 charles_wang888 51CTO部落格，原文連結：http://blog.51cto.com/supercharles888/1213128，如需轉載請自行聯絡原作者


相關文章