歡迎光臨
每天分享高質量文章

提高網站性能的 5 個 Grunt任務

在之前我多次提過如今關心的主要問題是,如何實現良好的性能以及你應該如何努力實現web頁面的快速響應。在我的一些關於JavsScript API的文章中,比如 介紹Resource Timing API 及 深入User Timing API,我對拖慢你的專案的根源進行了全面分析。在年前,Craig Buckler在他的文章-《The Complete Guide to Reducing Page Weight》中也涉及到這個話題。

如果你沒有停留在過去,你可能使用過一些任務自動管理工具(比如Grunt或Gulp)來改善我們的工作流程,它們可以自動完成我們之前要手動完成的工作。在這篇文章中我將會描述5個Grunt任務,幫助我們提高我們的網頁性能。

grunt-contrib-imagemin

我想說的第一個任務是grunt-contrib-imageimin。我想先討論它的原因是,圖片是拖慢網站性能的主要殺手!

如果你看過HTTParchive.org上的統計,你會發現圖片占了整個頁面大小的63%還多。如此臃腫的原因是圖片通常沒有被壓縮到盡可能小的程度。grunt-contrib-imageimin是可以用來解決這個問題的其中一個任務。

這個任務擁有以下的一些優化器,它們可以壓縮web上的絕大多數圖片格式:

  • gifsicle壓縮GIF圖片
  • jpegtran壓縮JPEG圖片
  • optipng壓縮PNG圖片
  • svgo壓縮SVG圖片

該任務配置的一個示例如下所示:

imagemin: {

dist: {

options: {

optimizationLevel: 5

},

files: [{

expand: true,

cwd: ‘src/images’,

src: [‘**/*.{png,jpg,gif}’],

dest: ‘dist/’

}]

}

}

這個配置可以通過使用optimizationLevel選項來實現高程度的優化。這個值範圍從0到7,預設為3。在這種情況下圖片優化指的是對那些圖片格式為png,jpg或gif,並且位於“src/images”檔案夾及它的所有子檔案夾的圖片進行優化。優化後的圖片將儲存在“dist”檔案夾中。

grunt-contrib-uglify

grunt-contrib-uglify任務用來壓縮JavaScript檔案。這個任務刪除你原始碼中的所有不必要的空格,並且重命名變數和函式以便使用盡可能短的名字。

你將會常常使用這個任務中的一些選項是sourceMap和banner。前者在同一目錄下創建一個源映射檔案作為標的檔案。為了啟用這個選項你必須設置它為true(預設值為false)。banner是壓縮輸出檔案的前置字串,你通常可以在那寫上你的檔案或庫或框架的名稱、它的版本、作者名和許可。

為了讓你對壓縮源有個認知,假設你擁有以下的代碼:

var MyApplication = function() {

var data = ‘hello’;

this.sum = function(first, second) {

return first + second;

}

this.showData = function() {

return data;

}

};

壓縮過程會把上面的代碼轉化為以下代碼:

var MyApplication=function(){var a=”hello”;this.sum=function(a,b){return a+b},this.showData=function(){return a}};

這個工具的示例配置如下所示:

uglify: {

dist: {

options: {

sourceMap: true,

banner: ‘/*! MyLib.js 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */’

},

files: {

‘dest/output.min.js’: [‘src/input.js’],

}

}

}

grunt-contrib-cssmin

顧名思義,grunt-contrib-cssmin是用來壓縮CSS檔案的。跟grunt-contrib-uglify任務類似,它也提供一個banner選項。

這個任務的一個簡單配置為:

cssmin: {

dist: {

options: {

banner: ‘/*! MyLib.js 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */’

},

files: {

‘dist/css/style.min.css’: [‘src/css/**/*.css’]

}

}

}

這個例子壓縮儲存在”src/css”及其子檔案夾的所有CSS檔案,並將結果儲存在一個命名為“style.min.css”的樣式表中,它位於“dist/css”檔案夾下。另外,這個配置在這個壓縮檔案的頂部增加了一個banner。

grunt-uncss

另一個處理CSS的任務是grunt-uncss。這個任務從一個專案中刪除未使用的CSS,因此會減少了最終CSS檔案的大小,從而提高了下載時間。如果你正在使用一個像Bootstrap或Foundation的框架開發,它是特別適合的。通過閱讀官方文件,你會發現這個任務有一些重要的局限性。

一些值得一提的不錯選項是ignore,它允許我們指定的選擇器串列不應該被刪除,ignoreSheets允許我們忽略指定樣式表。

一個使用這個任務的例子如下所示:

uncss: {

dist: {

options: {

ignore: [/js-.+/, ‘.special-class’],

ignoreSheets: [/fonts.googleapis/],

},

files: {

‘dist/css/unused-removed.css’: [‘src/index.html’, ‘src/contact.html’, ‘src/service.html’]

}

}

}

grunt-contrib-htmlmin

在本文中我想討論的最後一個Grunt任務是grunt-contrib-htmlmin,這是一個用來壓縮HTML代碼的任務。它不會對你的網站加速很多,因為它通常只可以為你節省幾Kb內容,如果你正使用gzip壓縮你的內容的話,它幫助甚至會更低。因此,如果你想要壓縮你的HTML,恩……祝賀你,這意味著你的網站已經優化的相當不錯啦。

儘管如此,在處理網站性能上要遵循的哲學是每個Kb都很重要。所以,讓我們看看將這個任務集成到我們的工作流的一個簡單的配置:

htmlmin: {

dist: {

options: {

removeComments: true,

collapseWhitespace: true

},

files: [{

expand: true,

cwd: ‘src’,

src: ‘**/*.html’,

dest: ‘dist/’

}]

}

}

上面的代碼處理所有放在“src”目錄及其子檔案夾的頁面,對這些頁面中的每一個,這個任務刪除了它找到的所有註釋及不必要的空格。並將結果儲存在“dist”目錄中。

結語

在本文中,我向您介紹了可以輕鬆提高你的網站性能的五個Grunt任務。它們很簡單,你真的沒有藉口去不使用,不去用更快的服務提供用戶更好的體驗。我希望你喜歡這篇文章,並儘快應用。

你曾經用過它們麽?它們提高你的網站多少性能?有沒有一些其他你喜歡的任務記你想要與我們分享的呢?

原文出處:Aurelio De Rosa

譯文出處:伯樂在線 – Martin

赞(0)

分享創造快樂