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

主篇 Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案。
根据主篇内容继续通过 compression-webpack-plugin 插件处理 chunk-vendors.js 文件过大的问题。
创建 vue.config.js 文件，后续配置都需要用到配置文件。
前端将文件打包成 .gz 文件，然后通过 nginx 的配置，让浏览器直接解析 .gz 文件，可以大大提升文件加载的速度。

安装插件

npm 安装

// 安装报错的话看下面注释，用下面的版本进行安装
$ npm install --save-dev compression-webpack-plugin

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

yarn 安装（跟上面同理）

$ yarn add compression-webpack-plugin --save-dev
复制代码

修改 vue.config.js，拷贝帖进去即可，然后 $ npm run build 进行打包测试 (js、css)，会发现有了 .gz 文件

const path = require('path');

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  devServer: {
    disableHostCheck: true
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@i': path.resolve(__dirname, './src/assets'),
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 下面是下载的插件的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100
      })
    ]
  }
}
复制代码

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

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]\.";
}
复制代码