16 серпня 2025 р.Українська

Розкрийте можливості мікрофронтендів за допомогою Федерації модулів JavaScript у Webpack 5. Дізнайтеся, як створювати масштабовані, підтримувані та незалежні веб-додатки.

Федерація модулів JavaScript з Webpack 5: Повний посібник з мікрофронтендів

У світі веб-розробки, що постійно розвивається, створення великих і складних додатків може бути непростим завданням. Традиційні монолітні архітектури часто призводять до збільшення часу розробки, проблем з розгортанням та труднощів у підтримці якості коду. Мікрофронтенди з'явилися як потужний архітектурний патерн для вирішення цих проблем, дозволяючи командам створювати та розгортати незалежні частини великого веб-додатку. Однією з найперспективніших технологій для реалізації мікрофронтендів є Федерація модулів JavaScript (JavaScript Module Federation), представлена у Webpack 5.

Що таке мікрофронтенди?

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

Уявіть собі це як компанію: замість однієї гігантської команди розробників у вас є кілька менших команд, що зосереджуються на конкретних сферах. Кожна команда може працювати незалежно, що дозволяє прискорити цикли розробки та полегшити підтримку. Розглянемо велику платформу електронної комерції, як-от Amazon; різні команди можуть керувати каталогом товарів, кошиком для покупок, процесом оформлення замовлення та керуванням обліковими записами користувачів. Все це можуть бути незалежні мікрофронтенди.

Переваги мікрофронтендів:

Незалежні розгортання: Команди можуть розгортати свої мікрофронтенди незалежно, не впливаючи на інші частини додатку. Це зменшує ризик розгортання та дозволяє пришвидшити цикли випусків.
Технологічна незалежність: Різні мікрофронтенди можуть бути створені з використанням різних технологій або фреймворків (наприклад, React, Angular, Vue.js). Це дозволяє командам обирати найкращу технологію для своїх конкретних потреб і поступово впроваджувати нові технології, не переписуючи весь додаток. Уявіть, що одна команда використовує React для каталогу товарів, інша — Vue.js для маркетингових лендингів, а третя — Angular для процесу оформлення замовлення.
Покращена автономність команд: Команди мають повну відповідальність за свої мікрофронтенди, що призводить до збільшення автономії, швидшого прийняття рішень та підвищення продуктивності розробників.
Підвищена масштабованість: Мікрофронтенди дозволяють масштабувати ваш додаток горизонтально, розгортаючи окремі мікрофронтенди на різних серверах.
Повторне використання коду: Спільні компоненти та бібліотеки можна легко поширювати між мікрофронтендами.
Простіше в обслуговуванні: Менші кодові бази, як правило, легше розуміти, підтримувати та налагоджувати.

Виклики мікрофронтендів:

Підвищена складність: Управління кількома мікрофронтендами може ускладнити загальну архітектуру, особливо в частині комунікації, управління станом та розгортання.
Накладні витрати на продуктивність: Завантаження кількох мікрофронтендів може створювати додаткове навантаження на продуктивність, особливо якщо вони не оптимізовані належним чином.
Наскрізні задачі: Обробка наскрізних задач, таких як автентифікація, авторизація та теми, може бути складною в архітектурі мікрофронтендів.
Операційні накладні витрати: Вимагає зрілих практик DevOps та інфраструктури для управління розгортанням і моніторингом кількох мікрофронтендів.

Що таке Федерація модулів JavaScript?

Федерація модулів JavaScript (JavaScript Module Federation) — це функція Webpack 5, яка дозволяє обмінюватися кодом між окремо скомпільованими JavaScript-додатками під час виконання. Вона дає змогу експонувати частини вашого додатку як "модулі", які можуть бути використані іншими додатками, без необхідності публікувати їх у центральному репозиторії, як-от npm.

Розглядайте Федерацію модулів як спосіб створення федеративної екосистеми додатків, де кожен додаток може надавати власну функціональність і споживати функціональність інших додатків. Це усуває потребу в залежностях на етапі збірки та дозволяє здійснювати справді незалежні розгортання.

Наприклад, команда, що розробляє дизайн-систему, може експонувати UI-компоненти як модулі, а команди різних додатків можуть споживати ці компоненти безпосередньо з додатку дизайн-системи, без необхідності встановлювати їх як npm-пакети. Коли команда дизайн-системи оновлює компоненти, зміни автоматично відображаються у всіх додатках, що їх використовують.

Ключові поняття у Федерації модулів:

Host (Хост): Основний додаток, який споживає віддалені модулі.
Remote (Віддалений): Додаток, який експонує модулі для споживання іншими додатками.
Shared Modules (Спільні модулі): Модулі, які є спільними для хоста та віддалених додатків (наприклад, React, Lodash). Федерація модулів може автоматично керувати версіями та дедуплікацією спільних модулів, щоб забезпечити завантаження лише однієї версії кожного модуля.
Exposed Modules (Експоновані модулі): Конкретні модулі з віддаленого додатку, які робляться доступними для споживання іншими додатками.
RemoteEntry.js: Файл, що генерується Webpack і містить метадані про експоновані модулі віддаленого додатку. Хост-додаток використовує цей файл для виявлення та завантаження віддалених модулів.

Налаштування Федерації модулів з Webpack 5: Практичний посібник

Розглянемо практичний приклад налаштування Федерації модулів з Webpack 5. Ми створимо два простих додатки: Host (Хост) та Remote (Віддалений). Віддалений додаток експонуватиме компонент, а хост-додаток буде його споживати.

1. Налаштування проєкту

Створіть дві окремі директорії для ваших додатків: `host` та `remote`.

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

2. Конфігурація віддаленого додатку

У директорії `remote` створіть наступні файли:

`src/index.js`: Точка входу для додатку.
`src/RemoteComponent.jsx`: Компонент, який буде експонуватися.
`webpack.config.js`: Файл конфігурації Webpack.

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Віддалений додаток

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

Це віддалений компонент!

Відображено з віддаленого додатку.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

Створіть `public/index.html` з базовою структурою HTML. Важливим є елемент `

3. Конфігурація хост-додатку

У директорії `host` створіть наступні файли:

`src/index.js`: Точка входу для додатку.
`webpack.config.js`: Файл конфігурації Webpack.

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Хост-додаток

Завантаження віддаленого компонента...

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

Створіть `public/index.html` з базовою структурою HTML (аналогічно до віддаленого додатку). Важливим є елемент `

4. Встановлення Babel

В обох директоріях, `host` та `remote`, встановіть залежності Babel:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

5. Запуск додатків

В обох директоріях, `host` та `remote`, додайте наступний скрипт до `package.json`:

```json "scripts": { "start": "webpack serve" } ```

Тепер запустіть обидва додатки:

```bash cd remote npm start cd ../host npm start ```

Відкрийте браузер і перейдіть за адресою `http://localhost:3000`. Ви повинні побачити хост-додаток, всередині якого відображається віддалений компонент.

Пояснення ключових опцій конфігурації:

`name`: Унікальна назва для додатку.
`filename`: Назва файлу, який міститиме метадані про експоновані модулі (наприклад, `remoteEntry.js`).
`exposes`: Об'єкт, що зіставляє назви модулів зі шляхами до файлів, вказуючи, які модулі слід експонувати.
`remotes`: Об'єкт, що зіставляє назви віддалених додатків з URL-адресами, вказуючи, де знайти файл remoteEntry.js для кожного віддаленого додатку.
`shared`: Список модулів, які повинні бути спільними для хоста та віддалених додатків. Опція `singleton: true` гарантує, що завантажується лише один екземпляр кожного спільного модуля. Опція `eager: true` забезпечує негайне завантаження спільного модуля (тобто, перед будь-якими іншими модулями).

Просунуті техніки Федерації модулів

Федерація модулів пропонує багато розширених функцій, які можуть допомогти вам створювати ще більш складні архітектури мікрофронтендів.

Динамічні віддалені модулі

Замість жорсткого кодування URL-адрес віддалених додатків у конфігурації Webpack, ви можете завантажувати їх динамічно під час виконання. Це дозволяє легко оновлювати розташування віддалених додатків без необхідності перезбирати хост-додаток.

Наприклад, ви можете зберігати URL-адреси віддалених додатків у файлі конфігурації або базі даних і завантажувати їх динамічно за допомогою JavaScript.

```javascript // У webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Припустимо, remoteUrl — це щось на зразок 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // ключ федерації модулів полягає в тому, що віддалений додаток є // доступним за назвою у віддаленому resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

Тепер ви можете завантажити хост-додаток з параметром запиту `?remote=http://localhost:3001/remoteEntry.js`

Спільні модулі з версіонуванням

Федерація модулів може автоматично керувати версіонуванням та дедуплікацією спільних модулів, щоб забезпечити завантаження лише однієї сумісної версії кожного модуля. Це особливо важливо при роботі з великими та складними додатками, які мають багато залежностей.

Ви можете вказати діапазон версій кожного спільного модуля у конфігурації Webpack.

```javascript // У webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

Кастомні завантажувачі модулів

Федерація модулів дозволяє визначати власні завантажувачі модулів, які можна використовувати для завантаження модулів з різних джерел або в різних форматах. Це може бути корисно для завантаження модулів з CDN або з власного реєстру модулів.

Обмін станом між мікрофронтендами

Однією з проблем архітектур мікрофронтендів є обмін станом між різними мікрофронтендами. Існує кілька підходів, які ви можете використати для вирішення цієї проблеми:

Управління станом на основі URL: Зберігайте стан в URL і використовуйте URL для комунікації між мікрофронтендами. Це простий і зрозумілий підхід, але він може стати громіздким для складного стану.
Кастомні події: Використовуйте кастомні події для трансляції змін стану між мікрофронтендами. Це дозволяє забезпечити слабкий зв'язок між мікрофронтендами, але може бути складно керувати підписками на події.
Спільна бібліотека для управління станом: Використовуйте спільну бібліотеку для управління станом, таку як Redux або MobX, для управління станом усього додатку. Це забезпечує централізований і послідовний спосіб управління станом, але може створити залежність від конкретної бібліотеки.
Брокер повідомлень: Використовуйте брокер повідомлень, такий як RabbitMQ або Kafka, для полегшення комунікації та обміну станом між мікрофронтендами. Це більш складне рішення, але воно пропонує високий ступінь гнучкості та масштабованості.

Найкращі практики для реалізації мікрофронтендів з Федерацією модулів

Ось кілька найкращих практик, які слід враховувати при реалізації мікрофронтендів з Федерацією модулів:

Визначайте чіткі межі для кожного мікрофронтенду: Кожен мікрофронтенд повинен відповідати за певну бізнес-область або функцію і мати чітко визначені інтерфейси.
Використовуйте узгоджений стек технологій: Хоча Федерація модулів дозволяє використовувати різні технології для різних мікрофронтендів, зазвичай краще використовувати узгоджений стек технологій для зменшення складності та покращення підтримки.
Встановлюйте чіткі протоколи комунікації: Визначте чіткі протоколи комунікації для взаємодії мікрофронтендів між собою.
Автоматизуйте процес розгортання: Автоматизуйте процес розгортання, щоб забезпечити незалежне та надійне розгортання мікрофронтендів. Розгляньте використання CI/CD-пайплайнів та інструментів інфраструктури як коду.
Моніторте продуктивність ваших мікрофронтендів: Моніторте продуктивність ваших мікрофронтендів для виявлення та усунення будь-яких вузьких місць. Використовуйте такі інструменти, як Google Analytics, New Relic або Datadog.
Реалізуйте надійну обробку помилок: Реалізуйте надійну обробку помилок, щоб забезпечити стійкість вашого додатку до збоїв.
Застосовуйте децентралізовану модель управління: Надайте командам повноваження приймати рішення щодо власних мікрофронтендів, підтримуючи при цьому загальну узгодженість та якість.

Приклади використання Федерації модулів у реальному житті

Хоча конкретні кейси часто є конфіденційними, ось кілька узагальнених сценаріїв, де Федерація модулів може бути неймовірно корисною:

Платформи електронної комерції: Як згадувалося раніше, великі платформи електронної комерції можуть використовувати Федерацію модулів для створення незалежних мікрофронтендів для каталогу товарів, кошика, процесу оформлення замовлення та управління обліковими записами. Це дозволяє різним командам працювати над цими функціями незалежно та розгортати їх, не впливаючи на інші частини додатку. Глобальна платформа може налаштовувати функції для різних регіонів за допомогою віддалених модулів.
Додатки для фінансових послуг: Додатки для фінансових послуг часто мають складні користувацькі інтерфейси з багатьма різними функціями. Федерацію модулів можна використовувати для створення незалежних мікрофронтендів для різних типів рахунків, торгових платформ та панелей звітності. Функції відповідності, унікальні для певних країн, можуть бути доставлені через Федерацію модулів.
Портали охорони здоров'я: Портали охорони здоров'я можуть використовувати Федерацію модулів для створення незалежних мікрофронтендів для управління пацієнтами, планування прийомів та доступу до медичних записів. Різні модулі для різних страхових компаній або регіонів можуть завантажуватися динамічно.
Системи управління контентом (CMS): CMS може використовувати Федерацію модулів, щоб дозволити користувачам додавати власну функціональність на свої веб-сайти, завантажуючи віддалені модулі від сторонніх розробників. Різні теми, плагіни та віджети можуть поширюватися як незалежні мікрофронтенди.
Системи управління навчанням (LMS): LMS може пропонувати курси, розроблені незалежно та інтегровані в єдину платформу за допомогою Федерації модулів. Оновлення окремих курсів не вимагають перерозгортання всієї платформи.

Висновок

Федерація модулів JavaScript у Webpack 5 надає потужний і гнучкий спосіб створення архітектур мікрофронтендів. Вона дозволяє обмінюватися кодом між окремо скомпільованими JavaScript-додатками під час виконання, забезпечуючи незалежні розгортання, технологічну різноманітність та покращену автономію команд. Дотримуючись найкращих практик, викладених у цьому посібнику, ви можете використовувати Федерацію модулів для створення масштабованих, підтримуваних та інноваційних веб-додатків.

Майбутнє фронтенд-розробки, безсумнівно, схиляється до модульних та розподілених архітектур. Федерація модулів надає ключовий інструмент для створення цих сучасних систем, дозволяючи командам створювати складні додатки з більшою швидкістю, гнучкістю та стійкістю. У міру розвитку технології ми можемо очікувати появи ще більш інноваційних сценаріїв використання та найкращих практик.