Vue打包性能优化

Posted 2022-01-27 ￡漫步 云端彡

Vue打包性能优化

借鉴两位大佬的文章
https://blog.csdn.net/qq_31677507/article/details/102742196
https://www.cnblogs.com/zigood/p/12504401.html

1. 安装compression-webpack-plugin，不能安装默认，默认最新版本会报错：TypeError: Cannot read property ‘tapPromise’ of undefined

npm install compression-webpack-plugin@6.1.1 --save-dev

2. 在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
				));
		
	,
;

3. 然后再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