关于webpack配置里的splitChunks中chunks问题？

Question

chunks有三个值all、async和initial。但具体有什么区别没研究出来，有老哥知道吗？

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

Answer 1

async： 动态引入的模块，
initial： 直接引入的模块，
all： 以上两种

---

这里直接引入lodash模块，和动态引入 jquery 模块

chunk："all"

打包后：

chunk: "initial"

打包后：

chunk： "async"

打包后：