Webpack中文：
SplitChunksPlugin | webpack 中文文档

上一节中我们异步加载lodash文件后产出的文件是0.js，我们如何让lodash产出的文件就是lodash名呢？
可以在异步加载的时候加上如下注释：

  1. function getComponent() {
  2.   // 命名为 lodash
  3.   return import(/* webpackChunkName: "lodash" */ "lodash").then(
  4.     ({ default: _ }) => {
  5.       console.log(_.join(["a", "b", "c"], "--"));
  6.     }
  7.   );
  8. }
  9. getComponent();

这样打包出来的文件就会进行命名啦。
image.png

optimization.splitChunks

这是 splitChunks 的默认配置参数，当我们设置 splitChunks:{} 的时候，splitChunks 就会执行默认的配置

  1. // ...
  2. module.exports = {
  3.   // ...
  4.   // optimization表示打包优化
  5.   optimization: {
  6.     // 导出的模块被使用才会进行打包
  7.     usedExports: true,
  8.     // 代码分割的配置
  9.     splitChunks: {
  10.       // 分割引入代码库的方式，默认为 async 异步，可选 all 同步和异步都进行分割
  11.       chunks: 'all', 
  12.       // 如果引入的包大于20000字节就进行分割
  13.       minSize: 20000, 
  14.       minRemainingSize: 0,
  15.       maxSize: 0,
  16.       // 表示包最少被使用 1 次
  17.       minChunks: 1,
  18.       maxAsyncRequests: 30, 
  19.       maxInitialRequests: 30,
  20.       enforceSizeThreshold: 50000,
  21.       // 代码分割的名字由 cacheGroups 对象决定
  22.       // 打包同步代码的时候，通过 splitChunks 进行分割，webpack 就会走 cacheGroups 的配置，这样可以更加精确的控制文件名
  23.       cacheGroups: {
  24.         // 检查同步的模块来自于哪里，如果是 node_module ，lodash 就会分配到 testName 的名字
  25.         defaultVendors: {
  26.           // 模块来自于 node_modules，名字就会拼接 vendors 前缀，例如 lodash
  27.           test: /[\\/]node_modules[\\/]/, 
  28.           // 匹配优先级，默认为0
  29.           priority: -10,
  30.           // 如果一个模块被打包过就不再进行打包
  31.           reuseExistingChunk: true,
  32.           // lodash 是在哪里被引入的，如果是 index.js 打包后也就是 main.js，所以 lodash 会被命名为 vendor~lodash 
  33.           // 可以通过 filename 对文件进行命名
  34.           filename: "testName.js"
  35.         },
  36.         // default 是一个兜底的组，如果不满足上面的条件就会分配到 default 里面
  37.         default: {
  38.           minChunks: 2,
  39.           priority: -20,
  40.           reuseExistingChunk: true,  
  41.           filename: "common.js"
  42.         },
  43.       },
  44.     },
  45.   }
  46. }

image.png
因为我们在src/index.js配置了lodash的产出名所以文件命名为lodash，而不是0.js，testName.js是根据cacheGroups条件产出的文件名，而不是之前的vendor～main.js。