? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 項(xiàng)目優(yōu)化之關(guān)于gzip壓縮的問題

a.本地打包的時(shí)候產(chǎn)生gzip壓縮文件

b.nginx 服務(wù)器配置 開啟gzip壓縮

Ⅰ vue.config.js中配置gzip:

const CompressionPlugin = require('compression-webpack-plugin') //gzip 壓縮的插件

const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; //要進(jìn)行壓縮的文件類型

// 配置gzip

configureWebpack: config => {

? if (process.env.NODE_ENV === 'production') {

? ? config.plugins.push(new CompressionPlugin({

? ? ? ? algorithm: 'gzip',

? ? ? ? test: productionGzipExtensions,

? ? ? ? threshold: 10240,

? ? ? ? minRatio: 0.8

? ? ? })

? ? )

? }

}

注意:修改了vue.config.js中的配置后,一定要記得重新啟動(dòng)或重新打包(npm run serve/npm run build)

Ⅱ nginx 中開啟gzip壓縮

gzip on;? // 開啟gzip壓縮

gzip_disable "msie6";? // 微軟IE6 低版本不適用gzip

gzip_static on;? // 默認(rèn)讀取本地gzip打包壓縮文件

步驟：

1. 連接遠(yuǎn)程服務(wù)器

2. 跳轉(zhuǎn)

cd /etc/nginx

vim nginx.config

3. insert

gzip on;

gzip_disable "msie6";?

gzip_static on;?

4. nginx -s reload? 重啟nginx