基於GruntJS前端性能優化

在本文中，如何使用GruntJS爲了使治療簡單的前端性能優化本身主動，我寫了一個完整的樣本放在Github上。可以參考一下。關於Yahoo的前端優化規則請參考：Best Practices for Speeding Up Your Web Site

前端性能主要有圖片的壓縮。JS和CSS的合併、壓縮。對所有靜態文件的文件依據其內容加上hash，而後把CSS、HTML等文件裏對所有的靜態文件名稱替換成加上hash的新文件名稱。對所有的靜態內容的路徑上加上CDN的URL。最後將所有的靜態文件上傳到七牛CDN上去。如下咱們按功能來講一下。

圖片壓縮

不少圖片尤爲是png圖片有時候含有大量無心義的填充，添加圖片的大小。咱們可以經過contrib-imagemin對所有的圖片進行壓縮優化，從而減少圖片的大小。

依據咱們使用經驗來看，通常可以壓縮5％到10％左右。

JS和CSS的文件的合併壓縮

合併JS和CSS可以大量的下降HTTP請求，達到優化前端性能的目的。

同一時候CSS和JS文件是靜態文件，可以壓縮到很小的大小。

GruntJS官方提供了contrib-concat,contrib-cssmin,contrib-uglify等相應的插件來作相應的事情。咱們這裏因爲要文件名稱的替換，使用了usemin插件，它會本身主動調用上述幾個插件的。因此在咱們的Gruntfile.js裏並無這3個插件的配置信息，而僅僅是在task列表裏調用了這幾個插件。

詳細請參考：usemin。

靜態文件緩存處理

爲了最大程度的提升瀏覽器的載入速度，最好的方法是讓瀏覽器將所有的靜態文件都緩存在client。這裏的緩存是指expire和cache-control的max-age，而不是Last-Modified。因爲使用Last-Modified 和 If-Modified-Since仍是會發出請求的，僅僅是沒有更新就返回304狀態碼而max-age則是不會發出請求的，而是直接使用本地的緩存。

使用緩存的面臨的一個比較在的問題是假設文件有更新假設清理緩存或者假設讓用戶下載最新的文件。

一種作法是靜態文件加上版本，好比 style.css?v=1.1。這樣的作法可以達到清除緩存的目的。但是維護起來相對麻煩。比較版本沒有辦法本身主動化，沒有辦法推斷文件是否有更新。第二種作法是對文件內容進行hash。而後將hash值增長到文件名稱中。好比style.abd1q2.css。這樣就很是easy進行本身主動化處理。咱們這裏使用了yeoman開發的filerev插件，它可以對文件內容進行MD5運算，而後將運算後的hash加到文件名稱中去，這樣就很是easy推斷文件是否被改動，同一時候它可以和usemin進行完美的結合起來。

Hash處理後文件名稱的替換

對CSS和JS進行壓縮合並以及對所有靜態資源進行filerev處理後，原來HTML、CSS、JS等靜態資源的引用文件名稱就需要替換成新的文件名稱了。好比HTML中對CSS和JS的引用，CSS中對圖片的引用。咱們使用了Yeoman開發的usemin進行替換。它的工做原理是，對需要處理的文件裏的靜態資源，在指定的目錄查找通過filerev處理過的相應文件。假設找到則替換成相應的文件。

好比。咱們在代碼中對CSS的引用代碼例如如下：<link type="text/css" href="style.css">，usemin會在指定的目錄如下尋找相似style.abd1q2.css的文件，假設找到則會把咱們的CSS引用代碼本身主動替換成：<link type="text/css" href="style.abd1q2.css">。

詳細請參考：usemin。

CDN路徑的替換

開發過程當中對所有靜態資源的引用都是指向項目本身的domain。假設要使用CDN，則需要將所有靜態資源的引用Domain指向CDN的domain。這裏使用GruntJS插件cdn來對所有靜態資源進行全局替換。

上傳靜態資源到CDN

當以上步驟完畢後就可以將所有的靜態文件上傳到CDN了。

七牛官方提供了NodeJS的SDK,但是貌似比較難用。咱們樣例裏使用了第三方開發的NodeJS模塊qn，很easy，詳見：qn。個人方法是畫面和CSS／JS穿越了那裏上傳的文件夾，圖片和CSS／JS加上不一樣的前綴分別爲。因爲7牛不具有的build文件夾內。見cdn.js文件。

說明

1. grunt build
2. grunt upload