React Academy · Урок

Module Federation с Webpack 5

Настройте хост-приложение и удалённое приложение с помощью Webpack Module Federation, чтобы делиться компонентами во время выполнения.

«Module Federation с Webpack 5» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Обзор Module Federation

Module Federation в Webpack 5 позволяет обмениваться модулями JavaScript между отдельно собранными приложениями во время выполнения: одно приложение предоставляет компоненты, а другое использует их без этапа сборки.

Роли: хост и удалённое приложение

Удалённое приложение предоставляет модули. Хост использует модули одного или нескольких удалённых приложений. Одно приложение может одновременно быть и хостом, и удалённым приложением.

Настройка удалённого приложения

В файле webpack.config.js удалённого приложения используйте ModuleFederationPlugin, чтобы предоставлять компоненты.

// Remote: apps/products/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'products',              // remote name
      filename: 'remoteEntry.js',    // entry file
      exposes: {
        './ProductCard': './src/components/ProductCard', // exposed module
        './CartButton': './src/components/CartButton',
      },
      shared: ['react', 'react-dom'], // share deps to avoid duplication
    }),
  ],
};

Настройка хоста

В конфигурации webpack хост-приложения укажите, какие удалённые приложения использовать и откуда их загружать.

// Host: apps/shell/webpack.config.js
new ModuleFederationPlugin({
  name: 'shell',
  remotes: {
    products: 'products@http://localhost:3001/remoteEntry.js',
    cart: 'cart@http://localhost:3002/remoteEntry.js',
  },
  shared: ['react', 'react-dom'],
})

Использование модуля удалённого приложения

Импортируйте модули удалённого приложения, используя его имя как префикс пути. Оборачивайте их в React.lazy и Suspense для отложенной загрузки.

import React, { lazy, Suspense } from 'react';

const ProductCard = lazy(() => import('products/ProductCard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductCard productId="123" />
    </Suspense>
  );
}

Общие зависимости

Перечисляйте общие пакеты с параметром singleton: true, чтобы среди всех микрофронтендов загружалась только одна копия React.

shared: {
  react: { singleton: true, requiredVersion: '^18.0.0' },
  'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
  '@company/design-system': { singleton: true },
},

Динамические удалённые приложения

Загружайте удалённые приложения динамически во время выполнения из конфигурации (например, из конечной точки манифеста), а не зашивайте URL в конфигурацию webpack.

async function loadRemote(scope, module) {
  await __webpack_init_sharing__('default');
  const container = window[scope];
  await container.init(__webpack_share_scopes__.default);
  const factory = await container.get(module);
  return factory();
}

const ProductCard = React.lazy(() => loadRemote('products', './ProductCard'));

TypeScript с Module Federation

Используйте плагин @module-federation/typescript, чтобы генерировать объявления типов для предоставляемых модулей и обеспечивать хосту полноценные подсказки автодополнения.

Границы обработки ошибок удалённых приложений

Оборачивайте компоненты удалённых приложений в границы обработки ошибок. Если удалённое приложение не удаётся загрузить, хост корректно продолжает работу вместо аварийного завершения.

<ErrorBoundary fallback={<div>Product unavailable</div>}>
  <Suspense fallback={<Skeleton />}>
    <ProductCard productId={id} />
  </Suspense>
</ErrorBoundary>

Module Federation в Vite

Плагин @originjs/vite-plugin-federation добавляет Module Federation в проекты на основе Vite с похожим API.

// vite.config.ts (remote)
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'products',
      filename: 'remoteEntry.js',
      exposes: { './ProductCard': './src/ProductCard' },
      shared: ['react'],
    }),
  ],
});

Быстрая проверка

Что делает установка singleton: true для общего пакета в Module Federation?

Итоги

Module Federation использует ModuleFederationPlugin в удалённых приложениях (для предоставления модулей) и хостах (для их использования). Импортируйте модули удалённых приложений с помощью lazy(), подключайте react как одиночный экземпляр, чтобы избежать дублирования, и оборачивайте удалённые приложения в границы обработки ошибок для корректного ухудшения функциональности.

Часто задаваемые вопросы

Урок «Module Federation с Webpack 5» бесплатный?

Да — полный текст урока «Module Federation с Webpack 5» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Module Federation с Webpack 5»?

Настройте хост-приложение и удалённое приложение с помощью Webpack Module Federation, чтобы делиться компонентами во время выполнения. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Module Federation с Webpack 5»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к React Academy