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

【问题标题】：lazy loaded modules share same dependencies?延迟加载的模块共享相同的依赖项？
【发布时间】：2021-03-09 21:11:32
【问题描述】：

我正在使用 webpack 以及来自不同插件（chartjs 等）的 react 和图表。我想使用React.lazy() 动态导入单个图表（条形图、极坐标图、折线图等），并在一个仪表板中显示大约 20 个（有时重复使用不同的数据）。

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

所以我的主要问题是，是否有某种方法可以捆绑某些图表组件的依赖项（即 chartjs）并在必要时仅加载此依赖项一次？或者有没有更聪明的方法来解决这个性能问题？

【问题讨论】：

你可以使用 webpack 魔法 cmets 并指定一个 webpack 块名称。这有帮助吗？ webpack.js.org/api/module-methods/#magic-comments
我做过类似的事情，我动态加载特定的图表类型。每个图表类型指定一个特定的块名称（webpack 魔术注释）
@NathanHall 谢谢！在您的链接中，我找到了以下行：Dynamically load modules. Calls to import() are treated as split points, meaning the requested module and its children are split out into a separate chunk. 这是否意味着每个图表都有一个单独的块，但公共依赖项（即 chartjs）位于一个单独的块中并在图表之间重新共享？如果是，那将解决我的问题
它只会在需要时加载图表依赖项，并且不会在其他动态导入中复制它。此外，您可以为每个动态导入定义 webpack 块名称
这能回答你的问题吗？ How to conditionally lazy load dynamic imports in react?

【解决方案1】：

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

通过将 cmets 添加到导入中，我们可以做一些事情，例如命名我们的块或选择不同的模式。

例子

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

【讨论】：