Module Federation

Module Federation — это технология, которая позволяет динамически загружать модули из других приложений во время выполнения. Она реализована на уровне сборщика Webpack 5 и значительно упрощает архитектуру микрофронтендов, позволяя разделять код между несколькими проектами без необходимости публиковать отдельные пакеты.

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

1. Обмен модулями между приложениями Module Federation позволяет одному приложению экспортировать свои модули, а другому — импортировать их на лету. В Vue.js это особенно удобно для компонентов, утилит и Vuex-модулей.

2. Совместное использование зависимостей Для оптимизации производительности и уменьшения дублирования кода Module Federation позволяет разделять общие зависимости, например Vue, Vue Router или сторонние библиотеки. Таким образом, несколько приложений могут использовать один и тот же экземпляр Vue.

3. Динамическая загрузка модулей В отличие от обычного импорта, который происходит на этапе сборки, Module Federation загружает модули в runtime, что позволяет обновлять части приложения без пересборки всего проекта.

Настройка Module Federation в Vue.js

Для работы с Module Federation необходимо использовать Webpack 5. Основные шаги:

1. Установка Webpack 5 и плагина ModuleFederationPlugin

npm install --save-dev webpack@5 webpack-cli@4

В webpack.config.js подключается плагин:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // остальные настройки сборки
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/components/Button.vue"
      },
      remotes: {
        app2: "app2@http://localhost:3002/remoteEntry.js"
      },
      shared: {
        vue: {
          singleton: true,
          requiredVersion: "^3.2.0"
        }
      }
    })
  ]
};

Пояснения ключевых полей:

  • name — уникальное имя приложения, которое экспортирует модули.
  • filename — имя файла, который будет содержать экспортируемые модули.
  • exposes — список модулей, доступных для других приложений.
  • remotes — список удалённых приложений, модули которых будут импортироваться.
  • shared — зависимости, которые должны использоваться совместно.

Импорт модулей из удалённого приложения

После настройки Module Federation можно динамически импортировать компоненты:

import('app2/Button').then((module) => {
  const RemoteButton = module.default;
  app.component('RemoteButton', RemoteButton);
});

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

Работа с Vue Router и Vuex

Vue Router: Можно регистрировать маршруты динамически после загрузки удалённых модулей:

import('app2/routes').then((module) => {
  router.addRoute(module.default);
});

Vuex: Для совместного использования состояния необходимо подключать модули Vuex через динамическую регистрацию:

import('app2/storeModule').then((module) => {
  store.registerModule('remoteModule', module.default);
});

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

Управление версиями и совместимость

1. Singleton-зависимости Важно указывать singleton: true для Vue, Vue Router и других критических библиотек. Это предотвращает загрузку нескольких версий библиотеки в память, что может вызвать ошибки.

2. requiredVersion Определяет минимальную версию зависимости, которую должно использовать приложение. Это особенно важно при совместной работе нескольких команд.

3. Фолбэки и fallback Можно настраивать fallback для удалённых модулей на случай, если они недоступны:

remotes: {
  app2: "app2@http://localhost:3002/remoteEntry.js",
  app3: "app3@http://localhost:3003/remoteEntry.js"
}

При недоступности одного из приложений можно динамически переключаться на другой источник.

Преимущества Module Federation в Vue.js

  • Масштабируемость — разделение фронтенда на микроприложения.
  • Сокращение времени сборки — модули загружаются динамически, не нужно пересобирать весь проект.
  • Повторное использование компонентов — одни и те же компоненты могут использоваться в нескольких приложениях.
  • Упрощение обновлений — можно обновлять отдельные части без деплоя всего приложения.

Лучшие практики

  • Использовать Module Federation для крупных проектов или микрофронтендов.
  • Разделять зависимости на shared и локальные, чтобы минимизировать дублирование.
  • Всегда проверять версии библиотек и указывать singleton для критичных зависимостей.
  • Использовать динамическую регистрацию Vue Router и Vuex, чтобы интегрировать удалённые модули без перезапуска приложения.

Module Federation в сочетании с Vue.js позволяет создавать гибкие, масштабируемые приложения, где разные команды могут работать над отдельными модулями параллельно, не мешая друг другу. Правильная настройка shared зависимостей и динамическая загрузка компонентов делают архитектуру микрофронтендов устойчивой и удобной в сопровождении.

Оглавление