一、文件壓縮的好處
前端生產環境中將js、css、圖片等文件進行壓縮的好處顯而易見，通過減少數據傳輸量減小傳輸時間，節省服務器網絡帶寬，提高前端性能。
二、http協議如何支持壓縮文件的傳輸
1、瀏覽器請求數據時，通過Accept-Encoding說明自己可以接受的壓縮方法
2、服務端接收到請求后，選取Accept-Encoding中的一種對響應數據進行壓縮
3、服務端返回響應數據時，在Content-Encoding字段中說明數據的壓縮方式
4、瀏覽器接收到響應數據后根據Content-Encoding對結果進行解壓
注：如果服務器沒有對響應數據進行壓縮，則不返回Content-Encoding，瀏覽器也不進行解壓
三、什么時候壓縮
四、服務器響應請求時壓縮（nginx）
服務端先不多說
五、構建時壓縮（webpack）
webpack的compression-webpack-plugin插件用於支持構建項目時壓縮文件，Vue項目為例，具體配置如下：
1、首先安裝插件，命令：npm install --save-dev compression-webpack-plugin
2、在config/index.js文件中打開Gzip開關，配置需要壓縮的文件擴展名
由於項目是通過vue-cli搭建的，所以就直接通過webpack來配置了。 
修改config目錄下的index.js，開啟gzip
如果沒有默認安裝compress-webpack-plugin插件，請先安裝。
在build目錄下的webpack.prod.conf.js添加代碼
3、webpack.prod.conf.js中設置具體壓縮配置項
if (config.build.productionGzip) { var CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ) }
4、打包后會同時保留原文件和壓縮后的文件，存儲等條件允許的情況下，原文件也建議發布到服務器以支持不兼容gzip的瀏覽器
5、服務端nginx啟動gzip_static
gzip_static是nginx對於靜態文件的處理模塊，該模塊可以讀取預先壓縮的gz文件，這樣可以減少每次請求進行gzip壓縮的CPU資源消耗。該模塊啟用后，nginx首先檢查是否存在請求靜態文件的gz結尾的文件，如果有則直接返回該gz文件內容。
為了要兼容不支持gzip的瀏覽器，啟用gzip_static模塊就必須同時保留原始靜態文件和gz文件。這樣的話，在有大量靜態文件的情況下，將會大大增加磁盤空間。我們可以利用nginx的反向代理功能實現只保留gz文件（參考文章中提到本文未嘗試）。
nginx需要安裝http_gzip_static_module以支持gzip_static，具體方法見《源碼安裝nginx》
由於我用的是nginx，所以我就只講nginx的配置了。
打開conf/ngxin.conf
在http、server、location下加以下代碼，詳情點擊nginx文檔。
gzip_static on; gzip_http_version 1.1; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; gzip_vary on;最后 nginx -s reload 重啟。
壓縮前
壓縮后
gzip壓縮原理
瀏覽器請求資源文件時會自動帶一個Accept-Encoding的請求頭告訴服務器支持的壓縮編碼類型。
但是不是每個瀏覽器都支持gzip的，如果知道客戶端是否支持gzip呢，請求頭中有個Accept-Encoding來標識對壓縮的支持。客戶端http請求頭聲明瀏覽器支持的壓縮方式，服務端配置啟用壓縮，壓縮的文件類型，壓縮方式。當客戶端請求到服務端的時候，服務器解析請求頭，如果客戶端支持gzip壓縮，響應時對請求的資源進行壓縮並返回給客戶端，瀏覽器按照自己的方式解析，在http響應頭，我們可以看到content-encoding:gzip，這是指服務端使用了gzip的壓縮方式。
那么怎么看有沒有用gzip壓縮的文件呢，打開f12，查看network，點擊“use large rows”表情來查看更多信息。包含了壓縮以后的大小和源文件的大小。
奇跡般的，主頁從187kb壓縮到了59kb。
content-encoding是gzip的話就說明返回的是gzip
還有一點 gzip不壓縮圖片，因為壓縮之后會更大- -，所以一般到是壓縮css和js
如何啟用gzip
前面說過了，啟用gzip需要客戶端和服務端的支持，如果客戶端支持gzip的解析，那么只要服務端能夠返回gzip的文件就可以啟用gzip了，現在來說一下幾種不同的環境下的服務端如何配置
開啟gzip 如果瀏覽器端不支持解壓 頁面會怎么樣
支持baigzip的瀏覽器會通過HTTP頭告訴服du務器zhi，如Accept-Encoding: gzip。服務器看到這個dao才返回gzip的zhuanshu。這是內HTTP協議的規容定。
如果瀏覽器不支持，那么服務器返回的數據不會是gzip內容了。
Accept-Encoding 為瀏覽器支持的的方式
Accept-Encoding: gzip,deflate,sdch
那么問題來了，前端發起請求需要設置 Accept-Encoding:gzip 嗎？這樣不就是強制了嗎？如果客戶端不支持怎么辦？
關於HTTP 請求頭Accept-Encoding 的理解
Accept-Encoding表示Http響應是否進行壓縮,一般的瀏覽器在訪問網頁時,是默認在請求頭中加入
Accept-Encoding: gzip, deflate ,表示這個請求的內容希望被壓縮,壓縮的目的是為了減少網絡流量,
但是這個只是協議,只能是要求而不是強制的,如果服務器不支持壓縮或者沒有開啟壓縮,則不能起到作用,
如果服務器也是支持壓縮或者開啟壓縮,則會在響應頭中加入Content-Encoding: gzip 頭部,