Reactjs 延迟加载的模块共享相同的依赖项？

我使用的是来自不同插件（chartjs.etc）的webpack和react以及图表。 我想使用

React.lazy（）

动态导入独立图表（条形图、极坐标图、直线图等），并在一个仪表板中显示大约20个图表（有时使用不同的数据重复显示）

我考虑了动态导入，因为我预计图表组件的数量会越来越多，并且希望将它们排除在主捆绑包之外。此外，我觉得我不能将它们放在一个包中，并一次性加载它们，因为其中一些使用不同的依赖项，并且并非所有依赖项都显示在仪表板上

---

所以我的主要问题是，是否有一种方法可以捆绑一些图表组件的依赖关系（即chartjs），并在必要时只加载一次该依赖关系？还是有更聪明的方法解决这个性能问题？

动态加载模块。对import（）的调用被视为分割点，这意味着请求的模块及其子模块被分割成单独的块

通过向导入添加注释，我们可以命名块或选择不同的模式

范例

import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  'module'
);

---

您可以使用webpack magic comments并指定webpack区块名称。这有用吗？我做过类似的事情，动态加载特定的图表类型。每个图表类型指定一个特定的区块名称（webpack magic comment）@NathanHall谢谢！在您的链接中，我找到了以下行：

动态加载模块。对import（）的调用被视为分割点，这意味着请求的模块及其子模块被分割成一个单独的块。

这是否意味着每个图表都有一个单独的块，但公共依赖项（即chartjs）位于一个单独的块中，并在图表之间重新共享？如果是，这将解决我的问题，它将仅在需要时加载图表依赖项，并且不会在其他动态导入中复制它。此外，您还可以为每个动态导入定义网页块名称回答您的问题吗？