2021-12-17 vue-cli4 splitChunks

优化前：

配置文件：

config.optimization.splitChunks({
      chunks: 'all',
      minSize: 20000, // 允许新拆出 chunk 的最小体积，也是异步 chunk 公共模块的强制拆分体积
      maxAsyncRequests: 6, // 每个异步加载模块最多能被拆分的数量
      maxInitialRequests: 6, // 每个入口和它的同步依赖最多能被拆分的数量
      enforceSizeThreshold: 50000, // 强制执行拆分的体积阈值并忽略其他限制
      cacheGroups: {
        assets: {
          // assetsImgSvg 单独拆包
          name: 'chunk-assets',
          test: /[\\/]src[\\/]assets/,
          priority: 20, // 权重
          chunks: 'all' // 只打包按需引入的模块
        },
        components: {
          // components 单独拆包
          name: 'chunk-components',
          test: /[\\/]src[\\/]components/,
          priority: 20, // 权重
          chunks: 'all' // 只打包按需引入的模块
        },
        pdfJS: {
          // pdfJS 单独拆包
          name: 'chunk-pdfJS',
          test: /[\\/]node_modules[\\/]_pdfjs-dist/,
          priority: 20, // 权重要大于 libs
          chunks: 'all' // 只打包按需引入的模块
        },
        ylz: {
          // components 单独拆包
          name: 'chunk-ylz',
          test: /[\\/]node_modules[\\/]@ylz/,
          priority: 20, // 权重要大于 libs
          chunks: 'all' // 只打包按需引入的模块
        },
        vconsole: {
          // vconsole 单独拆包
          name: 'chunk-vconsole',
          test: /[\\/]node_modules[\\/]vconsole/,
          priority: 20, // 权重要大于 libs
          chunks: 'all' // 只打包按需引入的模块
        },
        libs: {
          // 第三方库
          name: 'chunk-libs',
          test: /node_modules/,
          priority: 10
          // chunks: "initial" // 只打包初始时依赖的第三方
        },
        commons: {
          // 公共模块包
          name: 'chunk-commons',
          minChunks: 2,
          priority: 0,
          reuseExistingChunk: true
        }
      }

配置后记得在index.html引入chunks模块

  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '\u200E',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 模块名称，用于注入index.html模板
      chunks: [
        'chunk-assets',
        'chunk-components',
        'chunk-pdfJS',
        'chunk-ylz',
        'chunk-vconsole',
        'chunk-libs',
        'chunk-commons',
        'index'
      ]
    }
  },

优化后：

参考文献：
https://juejin.cn/post/6844904183917871117
https://blog.csdn.net/YaoDeBiAn/article/details/103653686
https://zhuanlan.zhihu.com/p/152097785?from_voters_page=true