Module Federation

Module Federation — механизм динамического разделения приложений и совместного использования модулей между несколькими сборками Webpack. Он позволяет Angular-приложениям загружать код друг друга на лету без необходимости сборки всего проекта вместе.

Принципы работы

  1. Host и Remote
  • Host — основное приложение, которое загружает удалённые модули.
  • Remote — отдельный проект, экспортирующий свои модули для использования в других приложениях.
// webpack.config.js host
new ModuleFederationPlugin({
  remotes: {
    remoteApp: 'remoteApp@http://localhost:4201/remoteEntry.js'
  }
})
  1. Экспорт и импорт модулей Remote-приложение экспортирует Angular-модули через ModuleFederationPlugin:
new ModuleFederationPlugin({
  name: 'remoteApp',
  filename: 'remoteEntry.js',
  exposes: {
    './ButtonModule': './src/app/button/button.module.ts'
  }
})

Host-приложение импортирует их динамически:

loadRemoteModule({
  remoteEntry: 'http://localhost:4201/remoteEntry.js',
  remoteName: 'remoteApp',
  exposedModule: './ButtonModule'
}).then(m => m.ButtonModule)
  1. Динамическая загрузка Module Federation поддерживает ленивую загрузку модулей Angular, что снижает первоначальный размер бандла и ускоряет рендеринг страницы.

Конфигурация и интеграция

  • Angular CLI не поддерживает Module Federation «из коробки», используется плагин @angular-architects/module-federation.
ng add @angular-architects/module-federation
  • В webpack.config.js прописываются shared зависимости, чтобы избегать дублирования библиотек:
shared: {
  '@angular/core': { singleton: true, strictVersion: true },
  '@angular/common': { singleton: true, strictVersion: true },
  '@angular/router': { singleton: true, strictVersion: true }
}
  • Важным аспектом является синхронизация версий Angular и сторонних библиотек между host и remote, иначе возникают конфликты.

Преимущества и практическое применение

  • Масштабирование больших проектов: разные команды могут работать над отдельными микрофронтендами.
  • Ленивая интеграция стороннего функционала: можно подключать новые модули без полной пересборки приложения.
  • Снижение времени загрузки: host подгружает только необходимые модули.

Module Federation в Angular открывает возможности микрофронтенд-архитектуры, позволяя создавать масштабируемые и гибкие приложения с независимыми обновлениями модулей.

Оглавление