最近项目发布到公网服务器，发现首次打开加载时太慢了，查看js文件发现chunk-vendors.js太大了，于是想着优化，发现了其中一种方案是使用压缩插件compression-webpack-plugin，压缩打包编译后的代码。将文件打包成 .gz 文件，然后通过 nginx 的配置，让浏览器直接解析 .gz 文件，可以大大提升文件加载的速度，浏览器可以直接解析 .gz 文件并解压。
压缩文件格式介绍
.gz：浏览器可以直接解析并解压。
.br：BR 文件是使用 Brotli（一种开源数据压缩算法）压缩的文件，它包含网页资产，例如 CSS 、XML、SVG、JS 文件，以 Brotli 压缩数据格式压缩。 Web 浏览器（例如 Chrome 和 Firefox）使用 BR 文件来提高页面加载速度，Brotli 数据压缩格式旨在替代 Zopfli 压缩算法，该格式允许的压缩率比Zopfli 高大约 20％。
.br 压缩需要基于 nodejs >=v10.16.0 版本才能生成，一般本地没问题，需要注意线上服务器会可能发生找不到 zlib 的情况并进行安装。
使用npm安装compression-webpack-plugin插件，如果你直接安装最新版的可能会报错。
所以选择安装低版本的，我尝试下来兼容的最高版本是6.1.1的版本，直接执行以下命令安装，安装成功。
npm install --save-dev compression-webpack-plugin@6.1.1
接着是在Vue的配置文件中配置compression-webpack-plugin插件，打开vue.config.js文件，添加如下代码，我是直接使用webpack的链式配置方式。
添加的位置请对着上图添加
const CompressionPlugin = require("compression-webpack-plugin");
const isProduction = process.env.NODE_ENV === 'production';
if (isProduction) {//只有在生产环境下才打开压缩
config.plugin('compressionPlugin').use(new CompressionPlugin({
algorithm: 'gzip',
test: /.js$|.css$|.html$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
minRatio: 0.8,//压缩比
deleteOriginalAssets: false // 不能删除源文件，不然报错"Uncaught SyntaxError: Unexpected token <"
}))
}
其中这句很重要deleteOriginalAssets: false，一定要是false，不然浏览器报错"Uncaught SyntaxError: Unexpected token <"
这样项目端就可以了，接着配置NGINX支持GZIP的操作。在NGINX的配置文件中添加gzip的相关功能代码，添加在server中即可，如下图：
代码添加位置请看上图
# 前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，可以大大提升文件加载的速度。
# compression-webpack-plugin 配置
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
# 配置禁用 gzip 条件，支持正则，此处表示 ie6 及以下不启用 gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6].";
然后执行NGINX配置文件检查命令
/usr/local/nginx/sbin/nginx -t
没有问题，重启NGINX服务
/usr/local/nginx/sbin/nginx -s reload
最后，就成功了，没有压缩前chunk-vendors.js 大小大概是1.9MB，压缩后到500KB提升了3倍的速度，还是不错的。当然还有其他的优化方法，比如将其拆分，将所有的依赖都打包成单独的js等等，这些暂时就不弄了。
参考文献：
0、compression-webpack-plugin - npm
1、记一次vue-cli 3.0 build包太大导致首屏过长的解决方案 - 风吹麦浪打 - 博客园
2、Vue 打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）_卡尔特斯的博客-CSDN博客_vue打包js文件过大
