为何Webpack每次动态import()会生成两个代码块？

这个问题是Webpack 4默认的splitChunks策略导致的——它会自动把第三方依赖抽离到单独的vendors chunk里，哪怕是动态导入的模块也不例外。要让动态导入的Chart模块和它的依赖打包成一个单独的chunk，你可以通过调整splitChunks的配置来实现，这里有两种实用的方案：

方案1：针对Chart模块配置专属的cacheGroup #

这种方式最灵活，既能保留默认的vendors拆分策略（针对入口chunk），又能让动态导入的Chart模块和依赖合并成一个chunk。修改你的webpack配置：

module.exports = {
  // ... 其他基础配置
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 保留默认的vendors规则，只处理入口chunk的第三方依赖
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'initial',
        },
        // 新增规则，专门处理动态导入的Chart模块
        chartBundle: {
          test: /[\\/]Chart\.js$/, // 匹配你的本地Chart模块文件
          name: 'chart', // 指定chunk名称和你魔法注释里的一致
          chunks: 'async', // 只作用于异步加载的chunk
          enforce: true, // 强制合并所有相关代码，忽略其他拆分规则
          priority: 10, // 优先级高于vendors规则，确保先匹配这个
        },
      },
    },
  },
};

配置完成后重新构建，Webpack会把你的Chart模块以及它依赖的所有第三方库都打包进chart.js，不会再生成空的chart.js和单独的vendors~chart.js。

方案2：全局关闭异步chunk的依赖拆分 #

如果你不需要针对异步chunk做依赖拆分，也可以直接修改splitChunks的chunks选项，让Webpack只处理入口chunk的依赖拆分：

module.exports = {
  // ... 其他基础配置
  optimization: {
    splitChunks: {
      chunks: 'initial', // 仅对初始加载的chunk做依赖拆分，异步chunk不拆分
    },
  },
};

这个方案的好处是配置简单，但缺点是所有动态导入的模块都会和它们的依赖打包在一起，如果你有多个动态导入的模块，可能会导致chunk体积过大，所以更推荐方案1。

另外补充一点：如果你的本地./Chart文件本身只是对第三方Chart库的简单导出（比如export default from 'chart.js'），也可以直接动态导入第三方库并指定chunkName：

import(/* webpackChunkName: "chart" */ 'chart.js')

再配合方案1的配置，同样能达到合并chunk的效果。

内容的提问来源于stack exchange，提问作者Matt Leonowicz