前端架构演进：从单体到微前端

前端架构演进从单体到微前端前端架构的发展历程第一阶段单体应用Mono Repo├── src/ │ ├── components/ │ ├── pages/ │ ├── services/ │ ├── utils/ │ └── styles/ └── index.html特点代码集中管理部署简单适合小型项目第二阶段组件化架构├── src/ │ ├── components/ │ │ ├── Button/ │ │ ├── Card/ │ │ └── Modal/ │ ├── containers/ │ ├── pages/ │ └── store/ └── index.html特点代码复用性高关注点分离便于团队协作第三阶段微前端架构├── apps/ │ ├── shell/ │ ├── home/ │ ├── profile/ │ └── checkout/ └── packages/ └── ui-components/特点独立开发和部署技术栈无关高扩展性微前端架构模式模式一基座模式// shell/src/App.js import { registerMicroApps, start } from qiankun; registerMicroApps([ { name: home, entry: //localhost:8081, container: #container, activeRule: /home }, { name: profile, entry: //localhost:8082, container: #container, activeRule: /profile } ]); start();模式二路由分发模式// router/index.js const routes [ { path: /home, microApp: home }, { path: /profile, microApp: profile } ];模式三构建时集成// webpack.config.js module.exports { plugins: [ new ModuleFederationPlugin({ name: shell, remotes: { home: homehttp://localhost:8081/remoteEntry.js } }) ] };状态管理方案对比方案一Redux// store.js import { createStore } from redux; const reducer (state, action) { switch (action.type) { case INCREMENT: return { count: state.count 1 }; default: return state; } }; const store createStore(reducer, { count: 0 });方案二Zustand// store.js import create from zustand; const useStore create((set) ({ count: 0, increment: () set((state) ({ count: state.count 1 })) }));方案三Jotai// store.js import { atom, useAtom } from jotai; const countAtom atom(0); function Counter() { const [count, setCount] useAtom(countAtom); return button onClick{() setCount(c c 1)}{count}/button; }组件设计原则单一职责原则// ❌ 违反一个组件处理多个职责 function UserProfile() { const [user, setUser] useState(null); const [loading, setLoading] useState(true); useEffect(() { fetchUser().then(data { setUser(data); setLoading(false); }); }, []); if (loading) return Spinner /; return ( div h1{user.name}/h1 p{user.email}/p /div ); } // ✅ 正确职责分离 function useUser() { const [user, setUser] useState(null); const [loading, setLoading] useState(true); useEffect(() { fetchUser().then(data { setUser(data); setLoading(false); }); }, []); return { user, loading }; } function UserProfile() { const { user, loading } useUser(); if (loading) return Spinner /; return ( UserCard user{user} / ); }可组合性function withAuth(Component) { return function AuthenticatedComponent(props) { const { isLoggedIn } useAuth(); if (!isLoggedIn) { return Redirect to/login /; } return Component {...props} /; }; } const ProtectedPage withAuth(MyPage);代码组织策略按功能组织src/ ├── features/ │ ├── auth/ │ │ ├── components/ │ │ ├── hooks/ │ │ ├── services/ │ │ └── index.js │ └── dashboard/ │ ├── components/ │ ├── hooks/ │ └── index.js └── shared/ ├── components/ ├── utils/ └── styles/按类型组织src/ ├── components/ │ ├── Button/ │ └── Card/ ├── hooks/ │ ├── useAuth.js │ └── useFetch.js ├── services/ │ └── api.js └── pages/ └── Home.js性能优化策略代码分割const Home React.lazy(() import(./Home)); const About React.lazy(() import(./About)); function App() { return ( Suspense fallback{Loading /} Route path/ component{Home} / Route path/about component{About} / /Suspense ); }懒加载const Image ({ src, alt }) { const [isLoaded, setIsLoaded] useState(false); return ( div {!isLoaded Placeholder /} img src{src} alt{alt} loadinglazy onLoad{() setIsLoaded(true)} / /div ); };总结前端架构设计是一个持续演进的过程需要根据项目规模和团队情况选择合适的方案。关键在于保持代码的可维护性和可扩展性遵循单一职责和高内聚低耦合原则合理利用设计模式和最佳实践持续关注性能优化和用户体验选择适合当前项目的架构方案才能让团队高效协作构建出优秀的产品。