前端微前端：别让你的应用变成巨石应用
毒舌时刻
这应用做得跟巨石似的，想改个功能都得动全身。
各位前端同行，咱们今天聊聊前端微前端。别告诉我你还在维护一个巨大的单体应用，那感觉就像在没有分区的大房子里生活——能住，但乱得要命。
为什么你需要微前端
最近看到一个项目，代码量超过 100 万行，构建时间超过 10 分钟，团队协作困难。我就想问：你是在做应用还是在做代码仓库？
反面教材
// 反面教材：单体应用 // App.jsx import React from 'react'; import Header from './components/Header'; import Sidebar from './components/Sidebar'; import Dashboard from './components/Dashboard'; import Users from './components/Users'; import Products from './components/Products'; import Orders from './components/Orders'; import Settings from './components/Settings'; function App() { return ( <div> <Header /> <div> <Sidebar /> <main> <Dashboard /> <Users /> <Products /> <Orders /> <Settings /> </main> </div> </div> ); } export default App;
毒舌点评：这代码，就像把所有东西都塞进一个大袋子里，管它有用没用。
正确姿势
1. Module Federation
// 正确姿势：Module Federation // 1. 安装依赖 // npm install webpack@5 // 2. 配置 webpack // webpack.config.js const { ModuleFederationPlugin } = require('webpack').container; module.exports = { plugins: [ new ModuleFederationPlugin({ name: , remotes: { dashboard: , users: , products: , orders: , settings: , }, shared: { react: { singleton: true, requiredVersion: , }, 'react-dom': { singleton: true, requiredVersion: , }, }, }), ], }; // . 远程应用配置 // dashboard/webpack const { ModuleFederationPlugin } = require('webpack'); module = { plugins: [ new ({ name: , filename: , exposes: { './Dashboard': , }, shared: { react: { singleton: true, requiredVersion: , }, 'react-dom': { singleton: true, requiredVersion: , }, }, }), ], }; // . 主机应用 // App import React, { lazy, Suspense } 'react'; import './components/'; import Sidebar './components/Sidebar'; const Dashboard = lazy(() => import('dashboard/Dashboard')); const Users = lazy(() => import('users/Users')); const Products = lazy(() => import('products/Products')); const Orders = lazy(() => import('orders/Orders')); const Settings = lazy(() => import('settings/Settings')); function App() { return ( <> < /> <> <Sidebar /> <> <Suspense fallback={<>加载中...</>}> <Dashboard /> <Users /> <Products /> <Orders /> <Settings /> </Suspense> </> </> </> ); } export default App;
