微前端- web组件包

Question

我在研究如何把我们的独角兽分割成微锋。我想我发现Web组件是我最好的方法，但我想更好地理解。这就是我的Web应用程序现在的样子：

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

我的问题是，使用这种方法，我所有的微应用程序包都会被加载(因为使用<script src>导入)。有懒惰的装货方式吗？

还有其他更好的方法吗？

Answer 1

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

您还可以使用像RequireJS (或您自己的)这样的模块加载程序来只在需要时导入一些自定义元素。

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

Answer 2

什么叫偷懒装货？如果您只想在需要的时候加载您的应用程序，只需懒散地加载它们:)，也就是说，不要预先加载它们，而是在需要的时候具有动态添加<script>标记的逻辑。Web组件的好处是，它们本机支持这个用例：

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

当您用<micro-app2>加载它时，它将自动升级(即呈现)。

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