В этом посте описан метод, альтернативный предыдущему посту, который я написал по соответствующей теме. Моя основная цель - изучить альтернативы интеграции микро-интерфейсов в одном контексте, построенные с использованием разных технологий. В этом примере у нас есть компоненты, созданные в Angular, React 15 и React 0.14, загруженные на один и тот же экран (microfrontend1, microfrontend2, microfrontend3 соответственно). Интеграция этих компонентов осуществляется через манифест Webpack.
Манифест Webpack
Манифест Webpack - это файл JSON, содержащий информацию о файлах распространения. Он также включает дополнительные метаданные для очистки кеша.
Кеширование
Хэш, добавленный к имени файла, помогает определить, изменилось ли содержимое пакета с момента последней сборки. Когда мы загружаем скрипт и файлы CSS в браузер, он автоматически кеширует их, чтобы ускорить страницу при следующей загрузке. Если хэш в имени файла изменится, браузер поймет, что это другой файл, поэтому он будет получен снова. Очистка кеша является критическим фактором для загрузки браузером более новой версии микро-интерфейса при ее изменении.
Чтение манифеста
Когда приложение загружается, основное приложение получает файлы манифеста для микро-интерфейсов. Мы используем AJAX (например, axios, fetch и т. Д.), Чтобы получить их и добавить основной JS и CSS в браузер во время выполнения. В этом примере мы написали простую утилиту для загрузки микро-интерфейсов.
Инициализация микро-интерфейсов
Как только мы загрузим файлы манифеста, мы должны инициализировать микро-интерфейсы. В этом примере они инициализируются сами по себе, и инициализация зависит от технологии, которую они используют.
Если бы микро-интерфейс был построен с использованием React, мы бы сделали что-то вроде этого:
Для приложения Angular это будет выглядеть так:
Ключевым моментом при каждой инициализации является наличие элемента, доступного для загрузки микро-интерфейсом с уникальным именем.
Пример
Пример, который мы обсуждали в этом посте, выглядит так:
Легко, но эффективно визуализировать, как разные технологии и одни и те же технологии с разными версиями реагируют в браузере одновременно. Учтите, что Webpack играет важную роль в процессе сборки, помогая инкапсулировать код для изоляции.
Нам нужно знать о следующих ситуациях:
- Глобальные переменные, которые могут конфликтовать или создавать конфликты
- Используйте как можно больше ванильного JavaScript в основном приложении, чтобы предотвратить проблемы между библиотеками.
- Насыщение сети и задержка повлияют на первую загрузку, если будет слишком много микро-интерфейсов
Заключение
Обратите внимание, что наличие 1 КБ элементов и загрузка 2 КБ внешних ресурсов в браузер не является масштабируемым решением. Это приведет к насыщению сети и значительно замедлит начальную загрузку. Когда они кешируются, это совсем другой опыт. Однако мы должны признать, что это огромная проблема, которую мы решим в одной из следующих статей.
