vuecli build 代码拆解

splitChunks: {
    // 表示选择哪些 chunks 进行分割，可选值有：async，initial和all
    chunks: "async",
    // 表示新分离出的chunk必须大于等于minSize，默认为30000，约30kb。
    minSize: 30000,
    // 表示一个模块至少应被minChunks个chunk所包含才能分割。默认为1。
    minChunks: 1,
    // 表示按需加载文件时，并行请求的最大数目。默认为5。
    maxAsyncRequests: 5,
    // 表示加载入口文件时，并行请求的最大数目。默认为3。
    maxInitialRequests: 3,
    // 表示拆分出的chunk的名称连接符。默认为~。如chunk~vendors.js
    automaticNameDelimiter: '~',
    // 设置chunk的文件名。默认为true。当为true时，splitChunks基于chunk和cacheGroups的key自动命名。
    name: true,
    // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块，就分配到该组。模块可以被多个组引用，但最终会根据priority来决定打包到哪个组中。默认将所有来自 node_modules目录的模块打包至vendors组，将两个以上的chunk所共享的模块打包至default组。
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10 //优先级越大越优先
        },
        // 
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

 

chunks选项，决定要提取那些模块。
默认是async：只提取异步加载的模块出来打包到一个文件中。
异步加载的模块：通过import('xxx')或require(['xxx'],() =>{})加载的模块。
initial：提取同步加载和异步加载模块，如果xxx在项目中异步加载了，也同步加载了，那么xxx这个模块会被提取两次，分别打包到不同的文件中。
同步加载的模块：通过 import xxx或require('xxx')加载的模块。
all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中
minSize选项：规定被提取的模块在压缩前的大小最小值，单位为字节，默认为30000，只有超过了30000字节才会被提取。
maxSize选项：把提取出来的模块打包生成的文件大小不能超过maxSize值，如果超过了，要对其进行分割并打包生成新的文件。单位为字节，默认为0，表示不限制大小。
minChunks选项：表示要被提取的模块最小被引用次数，引用次数超过或等于minChunks值，才能被提取。
maxAsyncRequests选项：最大的按需(异步)加载次数，默认为 6。
maxInitialRequests选项：打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件），默认为4。
先说一下优先级 maxInitialRequests / maxAsyncRequests <maxSize<minSize。
automaticNameDelimiter选项：打包生成的js文件名的分割符，默认为~。
name选项：打包生成js文件的名称。
cacheGroups选项，核心重点，配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cacheGroups每项中特有的选项，其余选项和外面一致，若cacheGroups每项中有，就按配置的，没有就使用外面配置的。
test选项：用来匹配要提取的模块的资源路径或名称。值是正则或函数。
priority选项：方案的优先级，值越大表示提取模块时优先采用此方案。默认值为0。
reuseExistingChunk选项：true/false。为true时，如果当前要提取的模块，在已经在打包生成的js文件中存在，则将重用该模块，而不是把当前要提取的模块打包生成新的js文件。
enforce选项：true/false。为true时，忽略minSize，minChunks，maxAsyncRequests和maxInitialRequests外面选项

 

理解 cache groups

cacheGroups 继承 splitChunks 里的所有属性的值，如 chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests、automaticNameDelimiter、name ，我们还可以在 cacheGroups 中重新赋值，覆盖 splitChunks 的值。另外，还有一些属性只能在 cacheGroups 中使用：test、priority 、reuseExistingChunk

 

// 关闭性能提示

  // performance: {

  //   hints: false

  // },

 

config.optimization.splitChunks({

        // chunks: 'initial',  // 表示选择哪些 chunks 进行分割，可选值有：async，initial和all 

        // minSize: 20000, // 表示新分离出的chunk必须大于等于minSize，默认为30000，约30kb。

        // maxSize: 60000,

        cacheGroups: {

          vendors: {

            name: 'chunk-vendors',

            test: /[\\/]node_modules[\\/]/,

            chunks: 'initial',

            minSize: 20000,

            maxSize: 60000,

            maxInitialRequests: 5,

            reuseExistingChunk: true,

            priority: 6,

            automaticNameDelimiter: '~',

            enforce: true

          },

          vant: {

            name: 'vant',

            test: /[\\/]node_modules[\\/]vant[\\/]/,

            chunks: 'initial',

            maxSize: 200000,

            reuseExistingChunk: true,

            priority: 3,

            enforce: true

          },

          echarts: {

            name: 'echarts',

            test: /[\\/]node_modules[\\/]echarts[\\/]/,

            chunks: 'initial',

            maxSize: 200000,

            reuseExistingChunk: true,

            priority: 4,

            enforce: true

          },

          common: {

            name: 'common',

            test: resolve('src/components'),

            chunks: 'initial',

            maxSize: 200000,

            reuseExistingChunk: true,

            priority: 3,

            enforce: true

          },

          // default: {

          //   chunks: 'all',

          //   maxSize: 100000,

          //   automaticNameDelimiter: '~',

          //   priority: 1,

          //   reuseExistingChunk: true

          // }

        }

      })