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

一、chunk-vendors.js 简介

顾名思义，chunk-vendors.js 是捆绑所有不是自己的模块，而是来自其他方的模块的捆绑包，它们称为第三方模块或供应商模块。

通常，它意味着（仅和）来自项目 /node_modules 目录的所有模块，会将所有 /node_modules 中的第三方包打包到 chunk-vendors.js 中。

将所有的第三方包集中到一个文件，自然也会出现文件过大的问题。

二、chunk-vendors.js 文件大小分析

新创建一个 vue 项目，通过打包之后运行到服务器，然后访问得到 chunk-vendors.js 为 182 B

通过安装第三方组件，将 chunk-vendors.js 文件增大，安装第三方组件之后需要在 main.js 中导入，重新运行 npm run build 进行打包。

npm i --save ant-design-vue，安装完打包后瞬间到了 1.9 MB！

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

npm i element-ui -S，安装完打包后瞬间到了 2.6 MB！

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

不要看后面的 Time 时间那么短，因为这是内网本机访问快，如果到了外网就跟服务器带宽、性能有关了，但是文件这么大，加载慢，那就需要拆开来进行分块加载，不是一味升级服务器解决问题，毕竟要钱的！

附带还未进行分块分包加载时，打包得到的文件目录(js、css)

三、方式一：compression-webpack-plugin 插件解决方案 四、方式二

还有种是通过 webpack 前端配置，将第三方包分开打包，这样不会将所有第三方包都打包到 chunk-vendors.js 文件，如果第三方包中存在过大的文件，那也会很大。

所以可以两者一起使用也是可以的，选择其中一种使用也可以，下面是两种一起使用，可以根据情况剔除选一种，或者都使用。

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 = {
  devServer: {
    disableHostCheck: true
  },
  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
      })
    ],
    // 开启分离 js
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 20000,
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name (module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1]
              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`
            }
          }
        }
      }
    }
  }
}

五、其他方式

比如将有些大的 js、css 通过 cdn 的方式链接，可以多种方案配合一起使用的。

其他参考方案