vue cli3.x 開啓gzip，優化速度

gizp壓縮是一種http請求優化方式，通過減少文件體積來提高加載速度，對於用戶量多的網站，開啓gizp壓縮會大大降低服務器壓力，提高加載速度，降低服務器流量成本

安裝compression-webpack-plugin

cnpm install compression-webpack-plugin --save-dev

vue.config.js配置Gzip壓縮

// 導入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定義壓縮文件類型
const productionGzipExtensions = ['js', 'css']

module.exports = {
     //統一配置打包插件
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
                threshold: 10240,//對10K以上的數據進行壓縮
                minRatio: 0.8,
                deleteOriginalAssets:false,//是否刪除源文件
            })
        ]
    },
}

npm run build 之後，對比之前的文件，平均壓縮了5到5倍左右

nginx配置gizp

	gzip on; #開啓或關閉gzip on off
	gzip_min_length 5k; #gzip壓縮最小文件大小，超出進行壓縮（自行調節）
	gzip_buffers 4 16k; #buffer 不用修改
	gzip_comp_level 8; #壓縮級別:1-10，數字越大壓縮的越好，時間也越長
	gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  壓縮文件類型 
	gzip_vary on; # 和http頭有關係，加個vary頭，給代理服務器用的，有的瀏覽器支持壓縮，有的不支持，所以避免浪費不支持的也壓縮，所以根據客戶端的HTTP頭來判斷，是否需要壓縮

修改後記得執行 nginx -s reload 

一般瀏覽器都已支持.gz的資源文件，在http請求的Request Headers 中能看到 Accept-Encoding:gzip