基于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。

靜態文件緩存處理

為了最大程度的提高瀏覽器的加載速度，最好的方法是讓瀏覽器將所有的靜態文件都緩存在客戶端，這里的緩存是指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。這樣就很容易進行自動化處理，我們這里使用 了yeoman開發的filerev插件，它可以對文件內容進行MD5運算，然后將運算后的hash加到文件名中去，這樣就很容易判斷文件是否被修改，同時它可以和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，非常簡單，詳見：qn。我的做法是將圖片和CSS／JS所在的目錄分別遍歷上傳，對圖片和CSS／JS分別加上不同的前綴。因為七牛是不提供在里面建文件夾的。詳見cdn.js文件。

用法

1. grunt build
2. grunt upload

來自：http://blog.csdn.net/borishuai/article/details/38562327