前端性能優化(3)--使用gzip

話很少說，直接上兩張圖對比下
[未啓用gzip的Size]

[用了gzip之後]

• html文件 5.2/10.5 50.5%
• css文件 1，9/5.4 35.2%
• png圖片 101/102 幾乎沒有變化
• js文件 31.6/99.8 31.7%（代碼壓縮過） 12.8/54.7 23.4%（代碼沒壓縮過）

附nginx配置

http {
    ...
    gzip  on; // 開啓gzip
    gzip_min_length 1k; // 最小1k的文件才使用gzip
    gzip_buffers 4 8k; // 表明以8k爲單位，按照原始數據大小以8k爲單位的4倍申請內存
    gzip_comp_level 5; // 1 壓縮比最小處理速度最快，9 壓縮比最大但處理最慢（傳輸快但比較消耗cpu）
    gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; // 支持的文件類型
    gzip_disable "MSIE [1-6]\."; // IE6一下 Gzip支持的很差，故不實用gzip
    ...
}

搜索了相關的資料，說是圖片自己已是壓縮過了的，gzip並無多大用處，反而增長了服務器的負擔，某些狀況下，文件的大小還會變大，因此並不推薦使用。以後看了下baidu之類的網站，發現圖片之類的文件，確實都是沒有啓動gzip的。但意外的發現bmp圖片(很少見)類型的，壓縮效率確實很高，我試了一張圖片，3.8M的，用gzip以後，大小爲992k，壓縮率爲25.5%，卻是很高，不知道是由於原圖沒壓縮過的緣由仍是其餘，但我一時找不到壓縮bmp的工具，因此無法驗證，你們本身實際應用的時候驗證下再用。

綜上所述，再部署前端資源的時候，建議爲html, js, css資源開啓便可，不須要爲圖片資源啓用gzip。