Microfrontends-Web组件捆绑包

Question

我正在研究将整体组件拆分为微型前端。我认为我发现Web组件是对我最好的方法，但我想更好地理解。这是我的Web应用现在的样子：

1. 多个Web应用程序，公开了导出Web组件的js文件。在渲染时，Web组件将渲染例如Vue应用程序/ react等...
2. Root index.html，它将导入Web应用程序（<script src="domain.com/micro-app1.js">），并使用它们（“ <micro-app1>”）。

我的问题是，使用这种方法，我的所有微应用程序包都已加载（因为使用<script src>导入）。是否有惰性加载方式？

还有其他更好的方法吗？

Answer 1

如果将<script>与async的defer一起使用，则将实现一种延迟加载。

您也可以使用RequireJS之类的模块加载器（或您自己的模块），仅在需要时才导入一些自定义元素。

或将元素放在HTML代码流中的首选位置，以优化加载。例如在主页底部。

Answer 2

您延迟加载是什么意思？如果只想加载应用程序，则何时为需要，只需延迟加载 ：)，即不要在advance中加载它们，但要有适当的逻辑需要时添加<script>标签动态地。关于Web Components的好处是，它们本地支持此用例：

<!-- ... -->
<micro-app1 />
<micro-app2 />

<micro-app2>将自动地升级（即渲染）何时，将其加载为<script src="domain.com/micro-app2.js">。

根据您的用例，您可以触发路由器更改，导航事件等的加载。>