vue项目，前端打包后chunk-vendors文件过大，导致加载过慢。

解决方案，性能优化处理:

1.在 vue.config.js 文件中使用 webpack的compressionPlugin

2.nginx 开启gzip优化

步骤

1.在 vue.config.js 文件中使用 webpack的compressionPlugin

安装 compressionPlugin

npm i -D compression-webpack-plugin

小贴士：

安装失败，处理方式

报错 TypeError: Cannot read property 'tapPromise' of undefined
原因：compression-webpack-plugin 版本问题

处理方式：

先执行卸载命令

npm uninstall compression-webpack-plugin

执行安装命令

npm i compression-webpack-plugin@5.0.1

vue.config.js 文件中：

引入插件

const CompressionPlugin = require("compression-webpack-plugin")

压缩配置

if (process.env.NODE_ENV === 'production') {
  config.plugin('compressionPlugin').use(
  new CompressionPlugin({
    filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)             
    algorithm: 'gzip', // 使用gzip压缩             
    test: new RegExp('\.(' + ['js', 'css'].join('|') + ')$'), // 匹配文件名            
    threshold: 10240, // 对超过10k的数据压缩            
    minRatio: 0.8 // 压缩率小于0.8才会压缩
  }))
}

2.Nginx 开启 gzip 

文件路径：

nginx安装目录 -> conf -> nginx.conf

nginx.conf文件添加如下gzip配置

 http {   
   gzip on; 
   gzip_static on;
   gzip_buffers 4 16k;
   gzip_comp_level 5;
   gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 
	 image/gif image/png;
 }

修改完nginx.conf文件配置，通过 nginx -s reload 命令重启服务