Vue打包性能优化
借鉴两位大佬的文章
https://blog.csdn.net/qq_31677507/article/details/102742196
https://www.cnblogs.com/zigood/p/12504401.html
- 安装compression-webpack-plugin,不能安装默认,默认最新版本会报错:TypeError: Cannot read property ‘tapPromise’ of undefined
npm install compression-webpack-plugin@6.1.1 --save-dev
- 在vue.config.js中配置
const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
// 其他配置略,这里重点看的是压缩
// 打包配置压缩
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: true
}));
}
},
};
- 然后再nginx上启用就可以了
server{
listen 8087;
server_name localhost;
gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6].";
location /{
index index.htm index.html;
}
}
注:在linux服务器上的nginx上配置可能会出错如下:
nginx: [emerg] unknown directive "gzip_static" in /root/env/nginx-1.20.1/conf/nginx.conf:102
这是因为没有 --with-http_gzip_static_module模块,安转即可
进入nginx安装目录,执行如下命令:
# 这里的/root/env/nginx-1.20.1是nginx的安装目录
./configure --prefix=/root/env/nginx-1.20.1 --with-http_gzip_static_module
# 之后执行,即可使用
make && make install