Ответ
Микрофронтенды можно разделить на несколько основных видов:
- 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.
Ответ 18+ 🔞
А, слушай, смотри, эти ваши микрофронтенды — они же, блядь, как сорты пива, их до овердохуища разновидностей! Одни собираются, как говно в проруби, заранее, другие — прямо в браузере у клиента матерятся, пытаясь загрузиться.
Ну, вот смотри, разложу по полочкам, а то ты, пизда бородавчатая, глаза пугаешь.
1. Собрать всё заранее, как чемодан в отпуск (Build-time) Это когда ты, сука, ещё на берегу договариваешься, какие библиотеки везешь. Типа NPM-пакеты или эти ваши монорепозитории (Lerna, Yarn Workspaces). Всё упаковал — и поплыл. Просто, но если одну библиотеку обновил — всем пересобираться, ёпта! Код вот такой, скучный:
// package.json
"dependencies": {
"shared-components": "1.0.0"
}2. Динамическая подгрузка прямо в браузере (Client-side) Вот тут уже веселее, чистая магия, а иногда — и чистый пиздец.
- Iframe. Дедовский способ. Полная изоляция, будто в танке сидишь, но чтобы с соседним iframe'ом поговорить — нужно протоколы составлять, ебать мои старые костыли! Устарел, как говно мамонта.
- Web Components. Модно, стильно, нативно. Свои теги, изоляция через Shadow DOM. Но, блядь, скептики говорят, что DX (developer experience) — хуй с горы, и с React'ом сразу не подружишь.
- Module Federation (Webpack 5). А вот это, сука, реально охуенно! Одно приложение может у другого кусок кода на лету спиздить и выполнить. Прямо как в кино про хакеров. Смотри, как просто выглядит конфиг:
new ModuleFederationPlugin({
remotes: {
app1: "app1@http://localhost:3001/remoteEntry.js"
}
});3. Серверная сборка (Server-side) Тут уже не браузер голову ломает, а сервер. Старые-добрые SSI, ESI. Nginx тебе из кусков страницу склеит, прежде чем отдать пользователю. Надёжно, быстро, но гибкости, блядь, ноль ебать. Как будто суп из пакета — сытно, но своего вкуса нет.
4. Гибридные подходы Ну и, конечно, самые хитрожопые берут всё понемногу. Next.js, например, может куски приложения динамически подгружать. Или бэкенд разбит на микросервисы, а фронтенд уже к ним цепляется. Универсального рецепта нет, только боль и терпение.
Итог, Колян: Выбирать надо по трём китам, блядь:
- Изоляция — чтобы твой кусок не сломал всё приложение, если ты, мудак, косяк допустил.
- Производительность — чтобы пользователь не поседел, пока всё загрузится.
- DX (Developer Experience) — чтобы самим разработчикам не хотелось повеситься от этих архитектурных извращений.
Вот и вся философия, в рот меня чих-пых! Дальше только практика и молитвы.