Module Federation та Micro-frontends з Vite
Module Federation дозволяє розбити великий додаток на незалежні micro-frontends, розгорнені окремо, але все ще ділять код та залежності під час виконання. Webpack піонером; Vite та Rollup тепер підтримують його через плагіни.
Що входить у роботу
Настройка module federation, конфігурація host та remote модулів, спільні залежності, async границі, стратегія розгортання.
Встановлення
npm install -D @originjs/vite-plugin-federation
Host конфігурація
// vite.config.ts для основного додатку
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
export default defineConfig({
plugins: [
react(),
federation({
name: 'host',
remotes: {
dashboard: 'http://localhost:5001/assets/remoteEntry.js',
admin: 'http://localhost:5002/assets/remoteEntry.js',
},
shared: ['react', 'react-dom', 'react-router-dom'],
}),
],
build: {
target: 'esnext',
},
})
Remote конфігурація
// vite.config.ts для remote (dashboard)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
export default defineConfig({
plugins: [
react(),
federation({
name: 'dashboard',
filename: 'remoteEntry.js',
exposes: {
'./Dashboard': './src/Dashboard.tsx',
'./hooks': './src/hooks/index.ts',
},
shared: ['react', 'react-dom', 'react-router-dom'],
}),
],
})
Host використання
// App.tsx
import { lazy, Suspense } from 'react'
const Dashboard = lazy(() => import('dashboard/Dashboard'))
const Admin = lazy(() => import('admin/AdminPanel'))
export function App() {
return (
<Suspense fallback={<div>Завантаження...</div>}>
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/admin" element={<Admin />} />
</Routes>
</Suspense>
)
}
Терміни
Базова настройка micro-frontend — 2–3 дні. Кілька remotes зі спільними бібліотеками — 1 тиждень. Стратегія production розгортання — 2 тижні.