我只是想知道假设我已经有一个网站。如果我想在其中注入一些反应模块，可以说 MODULE-A、MODULE-B、MODULE-C。在某些情况下，MODULE-A 和 MODULE-B 在同一页面上。所有模块都共享react、axios，但它们也有自己的依赖关系。实际上，为它准备构建的最佳方法是什么？我其实很喜欢create-react-app。有什么聪明的方法可以让模块只加载所需的依赖项吗？所以我可以分别包含它们，如果它们都存在于页面上，它们将不会在代码中克隆依赖项。
我想避免我有 20 个小模块并且它们都在内置代码中使用 react 的情况。所以60%的代码会重复依赖。
【问题讨论】：
标签： javascript reactjs webpack build
你没有太多选择
您可以利用这里提到的代码拆分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 页上加载 moduleB 和 ModuleC 时，您还将加载 depB，因为它包含在 vendors.js 中，您需要在编排上进行大量思考和操作。
但是您实际上可以做什么，您可以想到最关键的部分和最共享的部门并列出它们，假设您所有的包都使用react、react-dom、lodash，您将为@987654329 制作捆绑包@ 只有那些库，任何其他库都将与模块本身捆绑在一起，是的，你不能 100% 消除“双重加载”，但如果你要双重加载有几个 kB 的库，那很好，当它更大时，附带vendors.js
或者当您准确指定和编排加载的依赖项时，您可以在后端使用一些复杂的机制，因为您知道渲染了哪些模块以及它们的依赖项是什么。但是没有任何方法可以 on-the-fly 捆绑并仅发送需要和请求的依赖项，即时执行此操作会非常慢，您需要刷新对浏览器的快速响应，而不是通过额外的编译过程减慢它的速度.因此，正确地准备和拆分逻辑块中的代码很可能是一项手动工作，这是有意义的。
【讨论】：