webpack - 为什么 Webpack 每个动态 import() 生成 2 个块？

Question

我已经开始使用一些import()像这样的动态语句

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

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

我的配置没有什么花哨的。我只调用了一个命名条目client，这是我在使用动态要求之前唯一的捆绑包。开发和生产模式都会发生这种情况。我正在使用 Webpack 版本。4.8.1

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

Answer 1

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

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

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

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