Vue3.2.33、 VueCLI4.5.0打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）-CFANZ编程社区

最近项目发布到公网服务器，发现首次打开加载时太慢了，查看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插件，如果你直接安装最新版的可能会报错。

Vue3.2.33、 VueCLI4.5.0打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）_前端

所以选择安装低版本的，我尝试下来兼容的最高版本是6.1.1的版本，直接执行以下命令安装，安装成功。

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

Vue3.2.33、 VueCLI4.5.0打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）_compression_02

接着是在Vue的配置文件中配置compression-webpack-plugin插件，打开vue.config.js文件，添加如下代码，我是直接使用webpack的链式配置方式。

Vue3.2.33、 VueCLI4.5.0打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）_Vue打包文件过大_03

添加的位置请对着上图添加

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中即可，如下图：

Vue3.2.33、 VueCLI4.5.0打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）_compression_04

代码添加位置请看上图

# 前端将文件打包成.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配置文件检查命令