Обмен технологиями

Микроинтерфейс: Qiankun, Wujie, Single-Spa, сравнение iframe

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Обзор микрофронтенд-фреймворка

Микрофронтенд-фреймворк — это техническое решение, предназначенное для разделения больших клиентских приложений на несколько небольших, независимых и поддерживаемых микрофронтенд-приложений. Каждое микрофронтенд-приложение можно разработать, протестировать, развернуть и запустить. независимо, сохраняя при этом общее сотрудничество и пользовательский опыт.Эта архитектура похожа на микросервисную архитектуру, но ориентирована на интерфейсную часть.

2. Общие микрофронтенд-фреймворки

  1. Цянькунь : разработанный и поддерживаемый Ant Financial на основе Single-SPA, он предоставляет независимые от технологического стека и простые функции доступа. Он поддерживает несколько интерфейсных платформ, таких как Vue и React, имеет низкие затраты на трансформацию и удобный опыт разработки.
  2. одноместный-спа : это легкая интерфейсная среда маршрутизации JavaScript, ориентированная на управление маршрутизацией одностраничных приложений (SPA). Хотя это не полноценная среда микроинтерфейса сама по себе, она является основой для многих реализаций микроинтерфейса.
  3. фрейм: хотя iframe сам по себе не является микро-фронтенд-фреймворком, он часто используется как простая реализация микро-фронтенда.
  4. Неограниченный : Unbounded micro front-end framework — это микро-интерфейсное решение, основанное на веб-компонентах + iframe. Оно имеет ряд преимуществ, таких как низкая стоимость, высокая скорость, встроенная изоляция и надежные функции.Ниже приводится подробное введение в неограниченную микро-интерфейсную среду.

Общие моменты:При переключении маршрута вы можете загрузить код соответствующего приложения и запустить его в контейнере.

  • иметьВозможность загрузки и выгрузки субприложений., когда страница переключается из одного субприложения в другое, она может нормально загружаться и отображаться;
  • иметьВозможность сохранения состояния маршрутизацииПосле активации субприложения обновление браузера, прямая и обратная маршрутизация субприложения могут работать нормально;
  • Между основным приложением и субприложением, субприложением и субприложениемМогут общаться друг с другом
  • Каждое микроприложениеНезависимое управление складом, независимая разработка стека технологий, независимое развертывание и независимая эксплуатация.

3. Сравнение микрофронтенд-фреймворков

характеристикацянькуньНеограниченныйодноместный-спафрейм
Поддержка стека технологийНезависим от технологического стека, поддерживает React, Vue, Angular и т. д.Основан на WebComponent, поддерживает несколько стеков технологий.Независимость от технологического стека, поддержка нескольких интерфейсных платформ.Стек технологий не имеет никакого отношения, но интеграция должна учитывать совместимость.
Метод доступаПросто, доступ через JS APIОтносительно просто, инкапсулировано через WebComponent.Сложный, вам необходимо настроить жизненный цикл одного спа-центра.Простой, встроенный с помощью HTML-тегов
изоляция песочницыОбеспечивает песочницу JS и изоляцию стилей.Используйте WebComponent для естественной изоляции.Разработчикам необходимо реализовать изоляцию песочницы самостоятельно.естественная изоляция iframe
Управление маршрутамиПоддерживает ведение статуса маршрутизации и настраиваемое сопоставление маршрутизации.Поддержка виртуальной маршрутизации и поддержание статуса маршрутизацииВ качестве маршрута верхнего уровня вам необходимо самостоятельно управлять маршрутами субприложений.Маршрутизация управляется приложением внутри самого iframe.
Связь с приложениемОбеспечить механизм связи между приложениями родитель-потомок и приложениями-потомками.Предоставьте API на основе компонентов для поддержки связи.Разработчикам необходимо самим реализовать механизм связиМожет общаться через параметры postMessage или URL и т. д.
Предварительная загрузка ресурсовПоддержка предварительной загрузки статических ресурсов.Поддержка предварительной загрузки статических ресурсов.Поддержка отложенной загрузки приложений.Не поддерживает предварительную загрузку, загрузка по требованию
Влияние на производительностьНижняя версия, оптимизированная с помощью песочницы и отложенной загрузки.Меньше, но у WebComponent могут возникнуть издержки производительности.Меньше, но зависит от оптимизации приложенияЧем выше, тем больше накладные расходы на загрузку и рендеринг iframe.
Опыт разработкиЛучше, предоставляет богатый API и документацию.Улучшенный, компонентный API более интуитивно понятен.Как правило, вам придется обрабатывать множество деталей самостоятельно.Лучше и проще интегрироваться в существующие приложения.
доступность производстваПроверено и подходит для производственных средПодходит для производственных сред, но может иметь меньшую поддержку сообщества.Подходит для производственной среды и требует доработки самими разработчиками.Подходит для производственных сред, но вопросы безопасности и производительности требуют тщательного подхода.
Стоимость адаптацииВысшее: необходимо адаптировать маршрутизацию, жизненный цикл и т. д.Умеренный, в основном адаптирован к WebComponentВыше, требует глубокого понимания архитектуры одного спа.Ниже, но необходимо обратить внимание на проблемы совместимости и производительности.

Микрофронтенд-фреймворк дает множество преимуществ при разработке интерфейсных приложений, таких как независимость от технологического стека, независимая разработка и развертывание, поэтапные обновления и т. д. Однако у него также есть определенные недостатки, такие как высокая сложность доступа и плохие возможности совместного использования ресурсов. Поэтому, выбирая, использовать ли микрофронтенд-фреймворк, нужно всесторонне рассматривать его, исходя из конкретных потребностей проекта и технических возможностей команды. В то же время в практических приложениях нам также необходимо уделять внимание таким вопросам, как выбор микрофронтенд-фреймворка, проектирование архитектуры, управление кодом и т. д., чтобы обеспечить плавное развитие проекта и стабильную работу системы. система.