vue2项目打包后js文件过大, 首次加载缓慢

• 安装插件

npm i compression-webpack-plugin@6.1.1 -D

• 配置vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins:[
      new CompressionWebpackPlugin({
        filename: '[path][base].gz', //'[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.json$|\.css/,
        threshold: 10240, // 只有大小大于该值的资源会被处理
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        // deleteOriginalAssets: true // 删除原文件
      })
    ],
  },
}

• 后端配置nginx

http {
	include       mime.types;
	default_type  application/octet-stream;
	client_max_body_size 1024m;

	sendfile        on;
	keepalive_timeout  65;
	
    # 配置gzip
	gzip  on;
	gzip_min_length  1k;
	gzip_buffers     4 16k;
	gzip_http_version 1.1;
	gzip_comp_level 9;
	gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
	gzip_disable "MSIE [1-6]\.";
	gzip_vary on;
	

	server {
		listen       80;
		server_name  localhost;
		location / {
			root   html;
			index  index.html index.htm;
		}  
	}

}