前端微前端：大型应用的模块化解决方案
毒舌时刻
前端微前端？这不是过度设计吗？
"我的应用不大，不需要微前端"——结果应用越来越大，维护困难，
"微前端太复杂了，不如一个大单体"——结果团队协作困难，部署冲突，
"我用iframe就够了"——结果性能差，用户体验差。
醒醒吧，微前端不是银弹，但对于大型应用来说，它是一个有效的解决方案！
为什么你需要这个？
- 团队协作：不同团队可以独立开发和部署
- 技术栈灵活：不同微前端可以使用不同的技术栈
- 独立部署：单个微前端可以独立部署，不影响其他部分
- 可扩展性：可以轻松添加新的微前端
反面教材
<!-- 反面教材：使用iframe实现微前端 --> <!DOCTYPE html> <html> <head> <title>主应用</title> </head> <body> <h1>主应用</h1> <!-- 使用iframe加载微前端 --> <iframe src="https://micro-app1.example.com"></iframe> <iframe src="https://micro-app2.example.com"></iframe> </body> </html>
正确的做法
// 正确的做法：使用Module Federation // 主应用webpack配置 const { ModuleFederationPlugin } = require('webpack').container; module.exports = { plugins: [ new ({ name: , remotes: { microApp1: , microApp2: }, shared: { react: { singleton: true, requiredVersion: }, 'react-dom': { singleton: true, requiredVersion: } } }) ] }; // 微应用webpack配置 const { ModuleFederationPlugin } = require('webpack'); module = { plugins: [ new ({ name: , filename: , exposes: { './App': }, shared: { react: { singleton: true, requiredVersion: }, 'react-dom': { singleton: true, requiredVersion: } } }) ] }; // 主应用中使用微应用 import React, { lazy, Suspense } 'react'; // 懒加载微应用 const MicroApp1 = lazy(() => import('microApp1/App')); const MicroApp2 = lazy(() => import('microApp2/App')); function App() { return ( <> <>主应用</> <Suspense fallback={<>加载中...</>}> <MicroApp1 /> <MicroApp2 /> </Suspense> </> ); } // 正确的做法：使用Single-SPA // 主应用配置 import { registerApplication, start } 'single-spa'; // 注册微应用 registerApplication({ name: , app: () => (), activeWhen: (location) => location.pathname.(), customProps: { authToken: } }); registerApplication({ name: , app: () => (), activeWhen: (location) => location.pathname.() }); // 启动应用 start(); // 微应用配置 import { mountRootParcel } 'single-spa'; // 导出生命周期函数 export const bootstrap = async () => { console('微应用启动'); }; export const mount = async (props) => { console('微应用挂载', props); // 挂载应用 const el = document('micro-app-'); // 渲染应用 return Promise(); }; export const unmount = async () => { console('微应用卸载'); // 卸载应用 return Promise(); };
