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

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
        }
      }
    }
  }
};
阅读 3.3k
1 个回答

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


这里直接引入lodash模块,和动态引入 jquery 模块
clipboard.png

chunk:"all"

clipboard.png

打包后:

clipboard.png

chunk: "initial"

打包后:

clipboard.png

chunk: "async"

打包后:

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题