Какой плагин отвечает за настройку Micro Frontend

«Какой плагин отвечает за настройку Micro Frontend» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Для настройки Micro Frontend часто используют Module Federation из Webpack. Он позволяет разделять код между независимыми приложениями, загружая их динамически.

Пример конфигурации в 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',
      },
      remotes: {
        app2: 'app2@http://localhost:3002/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

Ключевые моменты:

  • exposes – что предоставляем другим приложениям.
  • remotes – что подключаем из других приложений.
  • shared – общие зависимости для оптимизации.

Альтернативы: Single SPA, Piral, Bit.