我只是想知道，假设我已经有一个网站。如果我想在其中注入一些反应模块，让我们说模块 A、模块 B、模块 C。在某些情况下，模块 A 和模块 B 在同一页面上。所有模块都共享react，axios但它们也有自己的依赖关系。实际上，准备构建的最佳方法是什么？我其实很喜欢create-react-app.有没有让模块只加载所需依赖项的智能方法？所以我可以单独包含它们，如果两者都存在于页面上，它们将不会克隆代码中的依赖项。
我想避免我有 20 个小模块并且它们都在构建的代码中使用 react 的情况。因此，60% 的代码将是重复的依赖项。
你没有太多选择
您可以利用此处提到的代码拆分 https://webpack.js.org/guides/code-splitting/因此假设您有
ModuleA -> [depA, depB, depC]
ModuleB -> [depA]
ModuleC -> [depC]
现在您可以将代码拆分为 4 个 JavaScript 文件，这些文件将是
moduleAbundle.js
mobuleBbundle.js
mobuleCbundle.js
vendors.js
vedors 将是depA, depB, depC的串联，但当然，当您在 1 页上加载模块 B 和 ModuleC 时，您还将加载 depB，因为它包含在vendors.js您需要思考和玩很多编排。
但是你实际上可以做的是，你可以想到最关键的部分和最共享的deps并列出它们，假设你所有的包都使用react，react-dom，lodash你将只用这些库为vendors制作捆绑包，任何其他库都将与模块本身捆绑在一起，是的，你不能100%消除"双重加载"，但如果你要双加载有几个kB的库，那很好， 当它更大时，请与vendors.js一起运送
或者，当您精确指定和编排加载的依赖项时，您可以在后端使用一些复杂的机制，因为您知道渲染了哪些模块以及它们是什么依赖项。但是没有任何方法可以on-the-fly捆绑和仅发送所需和请求的依赖项，即时执行此操作会非常慢，并且您需要刷新对浏览器的快速响应，而不是通过额外的编译过程减慢它的速度。因此，在逻辑块中正确准备和拆分代码很可能是一项手动工作，这是有意义的。
我不知道 React 的答案，但对于未来，也许您可以考虑使用 Angular 代替，以及它的 ngModule 功能，将应用程序拆分为多个具有自己依赖关系的独立模块。
https://angular.io/guide/ngmodules