Web前端開發最佳實踐（3）：前端代碼和資源的壓縮與合併

時間 2019-11-30

標籤 web 前端開發最佳實踐代碼資源壓縮合併欄目 HTML 简体版

原文原文鏈接

通常在網站發佈時，會壓縮前端HTML、CSS、JavaScript代碼及用到的資源文件（主要是圖片文件），目的是加快文件在網絡中的傳輸，讓網頁更快的展示。固然，CDN分發、緩存等方式也是加快代碼或資源文件傳輸的方式，但壓縮代碼和資源文件是最簡單有效的手段，代碼壓縮的優勢逐漸獲得了大部分的開發者的承認，並已經成爲了Web前端開發中不可或缺的一個步驟。如下是代碼和資源壓縮的具體實踐方法。javascript

1. Web服務器開啓Gzip壓縮

在HTTP協議中容許客戶端能夠選擇從服務器上下載壓縮的內容，Gzip就是其中一種支持的格式。Gzip是一種常見的壓縮算法，能夠參考維基百科的介紹得到這種算法的詳細介紹。目前，Gzip已經獲得了大部分的主流Web服務器(好比IIS、nginx、apache、lighttpd等)和主流的瀏覽器的支持。服務器配置人員能夠查看服務器對應的配置文檔，開啓Gzip壓縮。服務器啓用了Gzip壓縮後，代碼文件有更小的體積，尤爲是文本文件。css

Web服務器開啓Gzip壓縮後，會在Response的header中增長了Content-Encoding:gzip。能夠經過檢查此header項來判斷服務器是否開啓了Gzip壓縮。html

2. JavaScript代碼壓縮

JavaScript壓縮的原理通常是去掉多餘的空格和回車、替換長變量名、簡化一些代碼寫法等。 JavaScript代碼壓縮工具不少，有在線工具、有應用程序、有編輯器插件。其中使用最多的是UglifyJS 、YUI Compressor 和Closure Compiler。UgligyJS不只僅是一個壓縮工具，同時具備JavaScript語法分析和代碼美化功能，包括代碼縮減、代碼轉化等。如：前端

var a = 10; var b = 20; ==> var a=10,b=20;
if (foo) bar(); else baz(); ==> foo?bar():baz();
if (foo) bar(); ==> foo&&bar();
new Array(1, 2, 3, 4)  => [1,2,3,4]

Closure Compiler出自Google，來頭不小。功能和UglifyJS相似，只是壓縮的算法不一樣。java

YUI Compressor出自Yahoo，此工具不一樣於以上兩個工具。UgligyJS和Closure Compiler不光是Compressor，同時仍是compiler，會針對代碼進行優化，而YUI Compressor僅僅是壓縮。nginx

這三個工具都有對應的在線版，也能夠本地安裝後使用命令行方式。若是不想手動壓縮代碼，則能夠選擇編輯器自動化集成方式，好比在WebStorm編輯器中配置File Watchers。git

3. CSS代碼壓縮

CSS代碼壓縮原理和JavaScript代碼壓縮的原理相似，也是去掉沒必要要的空格回車註釋等，並同時優化合並一些CSS規則定義，讓規則更簡潔。好比，以下的代碼：github

background-color:#fff;
background-image: url(image.gif);
background-repeat:no-repeat; 
background-position: top left;

會優化爲：web

background: #fff url(image.gif) no-repeat top left;

CSS代碼壓縮工具也有在線、本地應用程序和編譯器插件。比較有名的在線在線工具是CSS Compressor，壓縮時能夠選擇各類配置模式。自動化工具能夠選擇上面提到的JavaScript壓縮工具YUI Compressor，YUI Compressor也能夠壓縮CSS代碼。使用相同的工具壓縮JavaScript和CSS代碼，省去了安裝多個工具的麻煩。算法

4. HTML代碼壓縮

壓縮HTML代碼的爭議很大，反對的一方以爲壓縮的做用不大，不像壓縮JavaScript和CSS代碼，壓縮HTML代碼僅僅是去掉空格回車註釋等無關字符，並不會簡化HTML代碼自己，因此以爲在服務器開啓Gzip就足夠了。另外，壓縮HTML代碼也有一些限制，好比網站開發時，HTML頁面並非單純地HTML代碼，仍是和服務器端腳本混合在了一塊兒，好比PHP、ASP、JSP、ASP.NET等。壓縮相似這些頁面時，壓縮的規則就比較複雜，也容易破壞代碼。目前可用使用的HTML壓縮工具很少，使用最多的時這款工具：htmlcompressor。使用此工具的時候須要仔細調查和測試，避免壓縮工具破換頁面的代碼。

5. 圖片資源壓縮

除了代碼的壓縮外，網頁中使用最多的資源文件就是圖片，在通常的網站中，圖片資源佔有的比重仍是挺大的。圖片壓縮工具主要是在線工具和本地應用程序，尚未好一點的編輯器插件可用。好在通常項目中，圖片的變化並非很大，因此圖片的自動化壓縮工具的需求並非很迫切。

圖片壓縮工具也不少，以在線工具居多。在線工具中，推薦使用tinypng工具壓縮PNG格式圖片，推薦使用JpegMini壓縮JPG格式圖片。本地應用程序，則推薦ImageOptim。這是一款強大的工具，集成了多種壓縮工具，因此能夠壓縮多種格式（如：PNG、JPEG及GIF動畫）的圖片，支持拖放操做，使用也很是方便。

以上就是網站發佈時可使用的各類資源壓縮工具。除了在項目中使用合適壓縮工具以外，什麼時候壓縮代碼也很重要。由於壓縮後的代碼會影響代碼的調試，使得開發者不易肯定出錯代碼的位置，調試JavaScript代碼時也不易設置斷點，因此推薦在開發後期，甚至是在網站的發佈階段作代碼和資源的壓縮。若是放在網站發佈階段壓縮，則開發者在開發過程當中不須要考慮代碼壓縮的問題，方便了開發者的開發與調試。發佈階段壓縮代碼的方案也很成熟，好比使用ANT工具。ANT是一個基於Java™ 的構建工具，在這個工具中能夠構建代碼和資源壓縮的任務：使用 YUI 壓縮程序合併和壓縮 JavaScript和CSS、使用 jpegtran和optipng優化JPG和PNG文件、使用htmlcompressor壓縮 HTML及移除調試代碼。

目前很流行的前端自動化構建工具Grunt 也能夠集成代碼和資源的壓縮工具。在Grunt的插件列表頁面上，有不少的壓縮代碼和資源文件的插件可用。好比，壓縮JavaScript的grunt-contrib-uglify插件、壓縮CSS代碼的grunt-contrib-cssmin插件及壓縮圖片的grunt-contrib-imagemin插件等。