需要设计可扩展前端应用架构时：用组件分层、设计模式…

适用于大型前端应用从组件设计、状态管理、模块拆分、构建优化到测试与性能治理的架构规划与重构。

适用场景

解决思路

1. 按单一职责原则拆分组件：每个组件只负责一个清晰目的；把数据获取、渲染、业务逻辑拆到不同组件或 hook，避免一个 UserDashboard 同时处理 user、posts、notifications、settings。
2. 优先使用组合而非继承：让 Button 等基础组件保持通用，通过 IconButton、LoadingButton 等包裹组合扩展行为，而不是创建深层继承体系。
3. 区分展示组件与容器组件：展示组件只接收 props 并渲染 UI；容器组件负责数据获取、mutation、导航、确认弹窗和事件处理，再传给展示组件。
4. 按分层架构分离关注点：组织 Presentation、Application、Domain、Infrastructure 四层，确保依赖从外向内，不把 API 调用写进 UI 组件。
5. 在 Domain 层实现业务实体和规则：用 class/type 表达 User、Post、UserRole 等实体，提供 canEditPost、displayName 等领域方法，避免把业务规则散落到组件。
6. 在 Infrastructure 层封装外部通信：用 UserRepository、ApiClient 等封装 /users/{id} 请求和存储/服务调用，并把返回数据映射为领域对象。
7. 在 Application 层编排状态、路由和 hooks：用 useUser、useUserRepository 等连接 Domain 与 Infrastructure，暴露查询、命令和 loading/error 状态。
8. 在 Presentation 层只消费应用层数据并渲染：组件调用 useUser 等 hook，根据 isLoading 渲染 Loading，最终显示 user.displayName、user.email 等。
9. 用 MVC 模式实现简单交互：Model 维护 todos 和 observers，Controller 处理 add/toggle 输入，View 订阅 Model 并渲染，提交时通过 controller 调 model。
10. 用 MVVM 模式实现复杂视图状态：Model 提供 TaskService，ViewModel 用 signal/computed/commands 暴露 filteredTasks、stats、loadTasks、toggleTask、setFilter，View 绑定 ViewModel。
11. 用 Flux 模式组织全局数据流：定义 ActionType/Action，Dispatcher 注册回调并 dispatch，Store 根据 action 更新 Map/状态并 emit change，View 订阅 Store 读取 items/total。
12. 用 Observer 模式处理事件流：Subject 提供 attach/notify，Observer 实现 update；例如 UserPresenceService 通过 WebSocket onmessage 解析数据后 notify 订阅者。
13. 用 Factory 模式动态创建表单字段：为 text/email/select/date 定义 factory，FormBuilder 根据 schema 的 field.type 创建 FormInput，并调用 render、validate、getValue。
14. 用 Module Pattern 封装私有状态：用 IIFE 创建 AuthModule，内部保存 currentUser、listeners、storeToken/clearToken，只暴露 login、logout、getCurrentUser、isAuthenticated、subscribe。
15. 选择合适的状态层级：组件私有 UI 状态用 local useState；兄弟组件共享用 lifted state；应用级会话用 Context；服务端数据用 React Query 等 server state。
16. 实现单向数据流：定义 AppState 和 AppAction，用 appReducer 处理 user/login、user/logout、cart/addItem、cart/removeItem、notifications/add，通过 AppContext 提供 state 和 dispatch。
17. 用 selector 读取和派生状态：在 Context/Redux 风格中封装 useUser、useCart，避免组件直接遍历整个 state，暴露 items、addItem、removeItem 等操作。
18. 用 Zustand 管理轻量全局状态：create store，定义 todos/filter 和 addTodo/toggleTodo/removeTodo/setFilter，使用 devtools、persist middleware，并通过 selector 订阅 filteredTodos。
19. 用 Jotai 管理原子状态：定义 primitive atom、derived atom、write-only atom，例如 userAtom、cartItemsAtom、cartTotalAtom、addToCartAtom，组件用 useAtomValue/useSetAtom 读写。
20. 使用 ES Modules 组织模块边界：在 modules/logger.ts 导出 interface/class/default，在 modules/api-client.ts 使用 import logger, { Logger } from './logger'，app.ts 再组合 ApiClient 和 logger。
21. 按路由做代码分割：使用 lazy(() => import('./pages/Home')) 等加载 Home、Dashboard、Settings，并用 Suspense fallback 包裹 Routes。
22. 按组件和动态导入做代码分割：用 lazy(() => import('./components/HeavyChart')) 延迟重型图表，用 await import('./utils/excel-exporter') 按需加载 ExcelExporter。
23. 做图片懒加载：用 IntersectionObserver 监听图片进入视口，设置 imageSrc 后断开 observer，并使用 loading="lazy" 和 placeholder.jpg。
24. 做数据无限滚动懒加载：用 useInfiniteQuery 和 IntersectionObserver 监听 loadMoreRef，当 hasNextPage 且未 isLoading 时 setPage(prev => prev + 1)。
25. 配置 Webpack：设置 entry main/vendor，output 使用 contenthash、chunkFilename、clean，optimization.splitChunks 配置 vendor/common cacheGroups 和 runtimeChunk: 'single'。
26. 继续配置 Webpack loader 与 plugin：ts-loader 处理 ts/tsx，style-loader/MiniCssExtractPlugin、css-loader、postcss-loader 处理 CSS，asset 处理图片；加入 HtmlWebpackPlugin、MiniCssExtractPlugin、BundleAnalyzerPlugin。
27. 继续配置 Webpack devServer：设置 port: 3000、hot: true、historyApiFallback: true，按 argv.mode 区分 development 输出文件名和 CSS 加载方式。
28. 配置 Vite：加入 @vitejs/plugin-react 和 rollup-plugin-visualizer，resolve.alias 设置 @、@components、@utils，build.rollupOptions.output.manualChunks 拆分 react-vendor、ui-vendor、utils。
29. 继续配置 Vite server：设置 port: 3000，proxy 将 /api 代理到 http://localhost:8000，changeOrigin: true 并用 rewrite 去掉 /api 前缀。
30. 按测试金字塔写测试：单元测试纯函数如 calculateCartTotal，组件测试 UserCard 渲染和 onEdit，集成测试 LoginFlow 登录跳转，E2E 测试 Checkout Flow 完整下单。
31. 编写测试工具和 mock：提供 renderWithProviders 包装 Provider、QueryClientProvider、BrowserRouter；提供 createMockUser；自定义 matcher 如 toHaveBeenCalledWithUser。
32. 按功能、路由、库制定代码分割策略：路由用 lazy，功能用 FeatureToggle 动态 import(`./features/${feature.name}`)，库用 lazy(() => import(/* webpackChunkName: "editor" */ '@monaco-editor/react'))。
33. 启用 tree shaking：使用 named imports 如 import { debounce } from 'lodash-es'，避免 import _ from 'lodash'；在 package.json 设置 sideEffects 为 ["*.css", "*.scss"]，用 /*#__PURE__*/ 标记纯函数。
34. 配置缓存策略：Service Worker 安装时 cache.addAll(STATIC_ASSETS)，fetch 时 caches.match 再回退 fetch；Express 静态资源设置 maxAge: '1y'、immutable: true；React Query 设置 staleTime、cacheTime、refetchOnWindowFocus。
35. 采用 feature-based 文件夹结构：src/features/auth 下放 components、hooks、services、types、index.ts；src/shared、src/core、src/layouts、src/pages、src/assets 分别承载共享组件、核心 API/config/router/store、布局、页面和资源。
36. 遵循命名约定：组件和类型用 PascalCase，hooks 用 use 前缀 camelCase，工具 camelCase，常量 UPPER_SNAKE_CASE；文件名如 UserProfile.tsx、UserProfile.test.tsx、UserProfile.module.css、useAuth.ts、userService.ts、user.types.ts。
37. 使用依赖注入提升可测试性：定义 ServicesContext 提供 api、storage、logger，组件通过 useServices 获取；测试时注入 mockApi 和 mockLogger。
38. 组件设计最佳实践：保持组件小而聚焦，优先组合，使用 TypeScript 类型安全，实现 prop validation。
39. 状态管理最佳实践：选择 local/global/server 正确层级，用 context 或状态库避免 prop drilling，使用不可变更新，分离 server state 与 client state。
40. 性能最佳实践：实现 code splitting 和 lazy loading，用 tree shaking 缩减 bundle，合理使用 memoization，配置缓存策略。
41. 测试最佳实践：遵循 testing pyramid，写有意义的测试而非只追求覆盖率，使用测试工具和 helpers，mock 外部依赖。
42. 可扩展性最佳实践：使用一致文件夹结构，遵循命名约定，建立模块边界，记录架构决策。

适用边界 · 注意事项

• 小型原型、一次性页面或简单局部功能不适合套用完整分层、多种设计模式、DI 和全局状态管理，会增加无谓复杂度。
• 团队尚未统一技术栈、没有维护约定或缺乏测试/构建基础时，不应同时引入多套状态管理和构建配置。
• 问题只是局部 bug、样式调整或短期交付时，不需要进行整套前端架构重构。