1

我正在研究如何将我们的单体应用拆分为微前端。我认为我发现 Web Components 对我来说是最好的方式，但我想更好地理解。这就是我的 Web App 现在的样子：

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

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

还有其他更好的方法吗？

4

2 回答 2

2

如果你使用<script>with asyncof defer，这将实现一种延迟加载。

您还可以使用像 RequireJS（或您自己的）这样的模块加载器仅在需要时导入一些自定义元素。

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

于 2019-01-29T18:29:32.070 回答
0

延迟加载是什么意思？如果您只想在需要时加载您的应用程序，只需延迟加载它们:) ，即不要提前加载它们，而是在需要时动态添加标签的逻辑。Web Components 的好处是，它们本身就支持这个用例：<script>

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

<micro-app2>当您使用. _ _<script src="domain.com/micro-app2.js">

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

于 2019-10-28T01:09:57.173 回答