适用于企业应用程序的分层Webpack捆绑

时间:2018-06-20 18:19:25

标签: webpack

在相当大的大型前端Web应用程序中,我们可能有许多产品包含依赖项的唯一模块和通用模块:

例如,假设我们有产品A,产品B和产品C。产品A有一些特定于该应用程序的模块,可以调用moduleA.1和moduleA.2。产品B和产品C可能相同。与大多数应用程序一样,我们希望保持干燥状态,因此我们创建了所有三个应用程序都可以使用的“核心”或“通用”模块。让我们将该模块称为moduleCore。

现在,我们使用Webpack将所有这些模块捆绑在一起,作为具有各自入口点的单个模块。这意味着在产品A代码中,我们需要引用3个捆绑软件:

产品A:

<script src="moduleCore.bundle.js"></script>
<script src="moduleA.1.bundle.js"></script>
<script src="moduleA.2.bundle.js"></script>

产品B和产品C相似,其中moduleCore是它们唯一共享的模块。

随着这些产品的增长,可能需要5、10或更多模块才能使这些功能正常运行。在某个时候,我们有太多的模块捆绑包,以至于它又回到了webpack应该解决的原始问题并导致性能下降等问题。我的直觉告诉我,每个产品都应该有一个使用我们上面定义的单个模块束。

因此,它没有像这样的大型应用程序:

产品A:

<script src="moduleCore.bundle.js"></script>
<script src="moduleA.1.bundle.js"></script>
<script src="moduleA.2.bundle.js"></script>
<script src="moduleA.X.bundle.js"></script>
.... more bundles ....

我们现在只需:

产品A:

<script src="productA.bundle.js"></script>

这基本上是原始捆绑包中的辅助捆绑包。这是webpack目前支持的东西吗?我认为我完全没有在文档中看到它。

谢谢

0 个答案:

没有答案