React.js多个独立模块的最佳工作流程

Question

我只是想知道让我说我已经有了一个网站。如果我想将一些反应模块注入其中，请说MODULE-A，MODULE-B，MODULE-C。在某些情况下，MODULE-A和MODULE-B在同一页面上。所有模块都共享react，axios，但它们也有自己的依赖关系。什么是为它准备构建的最佳方法？我其实很喜欢create-react-app。是否有任何智能方法使模块只加载所需的依赖项？所以我可以单独包含它们，如果它们都存在于页面上，它们将不会克隆代码中的依赖性。

我想避免我有20个小模块的情况，所有这些模块都使用内置代码进行反应。因此，60％的代码将是重复的依赖项。

Answer 1

你没有太多选择

您可以利用此处提到的代码分割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您将仅为那些库创建vendors的包，任何其​​他库将与模块本身捆绑在一起，是的，你不能100％elimate“双重加载”，但如果你将加载具有几个kB的库，那就没问题了，当它更大时，用vendors.js

运送它

或者，当您准确指定和编排加载的依赖项时，您可以在后端方面使用一些复杂的机制，因为您知道哪些模块是呈现的以及它们是什么依赖项。但是没有任何on-the-fly捆绑和发送只需要和请求的依赖关系的方法，在运行中执行该操作会非常缓慢，您需要刷新对浏览器的快速响应而不会减慢速度编译过程。因此，最有可能的是手动工作，以正确的方式准备和分割逻辑块中的代码是有意义的。