Vue 打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）

主篇 Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案。

附带：nvm 安装与使用 nodejs 版本管理

根据主篇内容继续通过 compression-webpack-plugin 插件处理 chunk-vendors.js 文件过大的问题。

创建 vue.config.js 文件，后续配置都需要用到配置文件。

前端将文件打包成 .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 安装

  // 安装报错的话看下面注释，用下面的版本进行安装
  $ npm install --save-dev compression-webpack-plugin// 由于安装最新版本会安装失败，报错 unable to resolve dependency tree
  // 所以需要找一个低版本的进行安装，如果不知道安装什么版本合适，就直接去 npm 官网找到这个组件，找到发布版本列表，一个一个的从新到旧安装，直到成功为止！
  // 上面的如果安装失败就先用这个版本，或者可以按照上句话所说的去尽量安装新的版本
  $ npm install --save-dev compression-webpack-plugin@6.1.1
  

• yarn 安装（跟上面同理）

  $ yarn add compression-webpack-plugin --save-dev
  

修改 vue.config.js，拷贝帖进去即可，然后 $ npm run build 进行打包测试 (js、css)，会发现有了 .gz 文件，如果添加 .br 压缩支持，也会多了 .br 文件。

• 如果报错 Error：Algorithm “brotliCompress“ is not found in “zlib“，是因为 nodejs 版本低了，需要升级、如果升级还是无法解决，可以暂且先注释 .br 的打包，因为主要还是 .gz 文件的压缩，.br 只是进一步优化，属于可选范围。

• 如果在 $ npm run build 的时候报错 TypeError: Cannot read property ‘tapPromise’ of undefined，看这里进行解决，原因是当前脚手架不支持 compression-webpack-plugin 的版本，需要降低。

const path = require('path');const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const zlib = require('zlib')
const isProduction = process.env.NODE_ENV === 'production'module.exports = {configureWebpack: {resolve: {alias: {'@': path.resolve(__dirname, './src'),'@i': path.resolve(__dirname, './src/assets'),}},plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),// 下面两项配置才是 compression-webpack-plugin 压缩配置// 压缩成 .gz 文件new CompressionPlugin({filename: '[path][base].gz',algorithm: 'gzip',test: /\.js$|\.css$|\.html$/,threshold: 10240,minRatio: 0.8}),// 压缩成 .br 文件，如果 zlib 报错无法解决，可以注释这段使用代码，一般本地没问题，需要注意线上服务器会可能发生找不到 zlib 的情况。new CompressionPlugin({filename: '[path][base].br',algorithm: 'brotliCompress',test: /\.(js|css|html|svg)$/,compressionOptions: {params: {[zlib.constants.BROTLI_PARAM_QUALITY]: 11}},threshold: 10240,minRatio: 0.8})]}
}

Nginx 配置，找到当前 Vue 项目对应的 Server 追加下面 compression-webpack-plugin 相关配置，然后重启 Nginx。

下面的配置主要是开启服务器压缩功能，如果本地不压缩成 .gz 文件，服务器就需要压缩，但是这样会消耗服务器性能，所以上面前端通过插件打包时就压缩出来 .gz 文件，这样访问服务器就只需要读取下载即可，服务器不需要走一次压缩，减少服务器开销！

server{listen 8088;server_name localhost;# 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]\.";
}

按着上面配置完成之后，重新打包提交到服务器，然后进行访问即可。这是打包之后访问的情况！