背景：
前端打包后的文件，一般app.js和chunk-vendors.js比較大，瀏覽器加載時間較長，額外項目里有字體文件，字體包加載時間也較長
解決方案：壓縮文件
1、webpack壓縮：使用compression壓縮插件（不應用圖片），在build時，將一個個滿足條件的文件壓縮成.gz文件並輸出dist包
2、nginx服務器壓縮： 需要瀏覽器和服務器雙方都支持，服務器端壓縮，傳到瀏覽器后瀏覽器解壓並解析。目前的絕大多數瀏覽器都支持解析gzip過的頁面。
nginx開啟gzip壓縮
ngx_http_gzip_module是nginx默認集成的，不需要額外安裝包，直接開啟gzip即可，配置圖如下：
效果圖，如下：
由上圖可知，chunk-vendors.js原大小882kb,nginx開啟gzip壓縮后，瀏覽器加載壓縮后的大小為292kb
並且我們查看響應頭會看到gzip參數，如下所示
nginx開啟gzip的必要參數：gzip、gzip_types、gzip_min_length
參數說明：
gzip on; #開啟gzip壓縮功能 gzip_min_length 1k; #設置允許壓縮的頁面最小字節數，頁面字節數從header頭的Content-Length中獲取，默認值是0，表示不管頁面多大都進行壓縮，建議設置成大於1K，如果小於1K可能會越壓越大 gzip_buffers 4 16k; #壓縮緩沖區大小，表示申請4個單位為16K的內存作為壓縮結果流緩存，默認是申請與原始是數據大小相同的內存空間來存儲gzip壓縮結果； gzip_http_version 1.1 #壓縮版本（默認1.1 前端為squid2.5時使用1.0）用於設置識別HTTP協議版本，默認是1.1，目前大部分瀏覽器已經支持GZIP壓縮，使用默認即可。 gzip_comp_level 2; #壓縮比率，用來指定GZIP壓縮比，1壓縮比最小，處理速度最快；9壓縮比最大，傳輸速度快，但處理最慢，也消耗CPU資源 gzip_types text/css text/xml application/javascript; #用來指定壓縮的類型，“text/html”類型總是會被壓縮，這個就是HTTP原理部分講的媒體類型。 gzip_vary on; #vary hear支持，該選項可以讓前端的緩存服務器緩存經過GZIP壓縮的頁面，例如用緩存經過Nginx壓縮的數據。
問題：在gzip_types配置對圖片和字體文件的支持后，瀏覽器加載到的資源並沒有變小
如上圖所示：
logo圖片原圖片大小30kb，開啟服務器的gzip壓縮，沒有變小，反而變大了，事實上，添加標頭，壓縮字典，並校驗響應體實際上使它變得更大，如下圖所示：壓縮需要成本。Web服務器獲得需要的內容，然后壓縮它，最后將它發送到客戶端。如果內容不能被進一步壓縮，你只是在浪費CPU做無意義的任務。其次，采用HTTP壓縮已經被過壓縮的東西並不能使它更小。
經調研，發現gzip有一個gzip_static 靜態壓縮
實現nginx檢測到壓縮文件，則直接使用，檢測到非壓縮文件則壓縮
在前端代碼打包構建bundle的時候，一般都有根據一定的算法自動壓縮代碼成gz文件的webpack插件;
gzip_static是會自動執行gz文件的，這樣的就避免了通過gzip自動壓縮；且服務器的壓縮率小於webpack
webpack開啟gzip壓縮
1、npm install --save-dev compression-webpack-plugin
2、在vue.config.js里配置，開啟webpack壓縮
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
...
configureWebpack: (config) => {
// 為生產環境修改配置
if (process.env.NODE_ENV === 'production') {
// 為下列文件開啟Gzip壓縮，GZip壓縮不適用於圖片上
config.plugins.push(
new CompressionPlugin({
test: /\.js$|\.html$|\.json$|\.svg$|\.woff$|\.ttf$|\.css/, // 匹配文件名
threshold: 1024, // 對超過1kb的文件進行壓縮
deleteOriginalAssets: true // 是否刪除原文件
})
)
}
},
}
3、npm run build 即可看到打包的dist文件夾包含.gz文件，將dist包上傳nginx服務器
4、ngxin服務器，nginx.conf文件配置 gzip_static on; 其它配置不動
開啟靜態壓縮后，效果圖如下：
瀏覽器加載的是壓縮過后的大小為239kb的chunk-vendors.js.gz,這樣將本地的壓縮文件上傳服務器，減少了服務器壓縮文件的cpu使用率，且節約了服務器壓縮文件的時間，提高了效率
對於像圖片，字體這樣的也是使用webpack壓縮，壓縮后，上傳服務器，服務器直接使用壓縮后的文件，效果如下圖：
