Микрофронтендс - комплекты веб-компонентов

Question

Я исследую вопрос о разделении нашего монолита на микро-интерфейсы. Я считаю, что веб-компоненты - лучший способ для меня, но я бы хотел лучше понять. Вот так выглядит мое веб-приложение:

1. Несколько веб-приложений, которые предоставляют файл JS, который экспортирует веб-компонент. При рендеринге веб-компонент будет рендерить, например, приложение Vue / реагировать и т. Д.
2. Root index.html, который импортирует веб-приложения (<script src="domain.com/micro-app1.js">) и используя их (<micro-app1>").

Мой вопрос заключается в том, что с помощью этого метода все мои пакеты микро-приложений загружаются (из-за импорта с использованием <script src>). Есть ли ленивый способ загрузки?

Есть ли другой лучший способ?

Answer 1

Если вы используете <script> с async из defer, это будет реализовывать своего рода ленивую загрузку.

Вы также можете использовать загрузчик модулей, такой как RequireJS (или ваш собственный), чтобы импортировать некоторые пользовательские элементы только при необходимости.

Или поместите элемент в предпочтительное место в потоке кода HTML, чтобы оптимизировать загрузку. Например внизу главной страницы.

Answer 2

Что вы имеете в виду под ленивой загрузкой? Если вы хотите загружать свои приложения только тогда, когда они нужны, просто загружайте их лениво:), т.е. не загружайте их заранее, но используйте логику, которая добавляет<script>теги динамически, когда они необходимы. Преимущество веб-компонентов в том, что они изначально поддерживают этот вариант использования:

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

<micro-app2>будет автоматически обновляться (т.е. отображаться), когда вы загружаете его с помощью<script src="domain.com/micro-app2.js">.

В зависимости от вашего варианта использования вы можете запускать загрузку при изменении маршрутизатора, событиях навигации и т. Д.