为什么Webpack在动态导入时会生成2个代码块？

Question

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

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

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

我的配置文件里没有什么花哨的东西。我只有一个名为client的命名入口，在使用动态require之前，这是我的唯一捆绑包。这在开发和生产模式下都会发生。 我正在使用Webpack ver. 4.8.1 有什么办法可以实现只有一个新的chunk吗？ 我不想让客户端进行两次请求而不是一次。

- Matt Leonowicz

---

“几乎是空的”，里面有什么？ - PlayMa256

那可能会有误导。我的意思是，它包含了我的组件的源代码，非常轻量级（gzip压缩后只有2KB），相比之下外部库依赖（webpack放在vendors-chart.js中）大约有90KB gzip压缩后大小。 - Matt Leonowicz

Answer 1

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

1. If your app have a single entry, you can remove the vendors cache group altogether since this vendor group is designed for multi-entry apps.

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

2. you can use webpack.optimize.MinChunkSizePlugin that will bundle you small chunk to another one, albeit not necessarily with the best optimized option.

- Nicolas Ch

---

第一个解决方案对我非常有效，但我不得不将 vendors 更改为 defaultVendors，请参见 https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks - danvk