Vue CLI開啓webpack打包gzip壓縮和nginx進行gzip壓縮

在webpack打包過程中開啓gzip壓縮，能夠有效的壓縮js、css、html文件，加快頁面的加載速度。

我們只需要在vue.config.js文件中加入配置，就可以在打包過程中將相應的文件進行gzip壓縮了。

configureWebpack: config => {
	config.plugins.push(new CompressionPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test:/\.js$|\.html$|.\css/, // 匹配文件名
        threshold: 10240, // 對超過10k的數據壓縮
        minRatio: 0.8,	// 只有壓縮好這個比率的資產才能被處理
        deleteOriginalAssets: true // 刪除源文件
     }));
}

附：

屬性	類型	默認	含義
test	{RegExp}	.	所有匹配此{RegExp}的資產都會被處理；
asset	{String}	path.gzquery	目標資產名稱。文件被替換爲原始資產。路徑將替換爲原始資產的路徑並使用查詢進行查詢；
filename	{Function}	假	{功能}（資產）=>接收資產名稱（處理資產選項後）並返回新資產名稱的資產
algorithm	{String	Function}	gzip的
threshold	{Number}	0	只處理大於此大小的資產。以字節爲單位
minRatio	{Number}	0.8	只有壓縮好這個比率的資產才能被處理
deleteOriginalAssets	{Boolean}	假	是否刪除原始資產

nginx也可以進行gzip壓縮，只需要考慮實際情況配置一個就可以。

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";