Ответ
Микрофронтенды можно разделить на несколько основных видов:
- Build-time интеграция (композиция на этапе сборки)
Пример: NPM-пакеты, монорепозитории (Lerna, Yarn Workspaces).
// package.json
"dependencies": {
"shared-components": "1.0.0"
}
-
Client-side интеграция (динамическая загрузка в браузере)
- Iframe: изоляция, но сложная коммуникация.
- Web Components: Custom Elements + Shadow DOM.
- Module Federation (Webpack 5):
new ModuleFederationPlugin({ remotes: { app1: "app1@http://localhost:3001/remoteEntry.js" } });
-
Server-side интеграция (SSI, Edge Includes, ESI)
Сборка фрагментов на сервере (Nginx, CDN). -
Гибридные подходы
Например, Next.js с динамическими импортами или микросервисами API.
Ключевые критерии выбора: изоляция, производительность, DX.