为什么Webpack每个动态导入生成2个块（）？

Question

我开始使用一些动态import()语句，如此

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

问题是Webpack会为此生成2个新块： chart.js （几乎为空）和 vendors~chart.js （实际上有我希望在一个新块中的所有内容。）

我的配置没什么特别的。我只有一个名为client的命名条目，这是我在使用动态需求之前唯一的一个包。 这适用于开发和生产模式。 我正在使用Webpack ver。 4.8.1

任何想法如何只实现一个新块？我不希望客户端发出2个请求而不是一个请求。

Answer 1

我找到了两种（不完美）的方法来避免这种情况。

1. 如果您的应用只有一个条目，则可以完全删除vendors缓存组，因为此供应商组是专为多条目应用而设计的。

   optimization: {
     splitChunks: {
       cacheGroups: {
         vendors: false, // not needed for a single entry app
       },
     },
   },
   

2. 您可以使用webpack.optimize.MinChunkSizePlugin将您的小块捆绑到另一个块，尽管不一定是最佳优化选项。