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

Question

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

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

所以我的主要问题是，有没有办法捆绑一些图表组件的依赖项（即 chartjs），并在必要时只加载一次这种依赖项？或者对于这个性能问题有更聪明的方法吗？

Answer 1

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

通过向导入添加注释，我们可以做一些事情，例如命名我们的块或 select 不同的模式。

例子

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

lazy loaded modules share same dependencies?