--- name: frontend-dev-engine description: 前端开发专家决策引擎。提供项目类型路由(SPA/SSR/小程序/游戏)、框架选择矩阵(React/Vue/Svelte/Angular)、构建工具决策(Vite/Webpack/Turbopack)、CSS方案决策(Tailwind/CSS Modules/Styled Components)、性能优化清单(Core Web Vitals/渲染/加载)、Canvas/WebGL游戏开发专项、质量门控三级清单、10个常见错误模式。当用户需要前端开发、React、Vue、TypeScript、CSS、前端架构、Web游戏、Canvas开发时使用此技能 --- # 前端开发决策引擎 > 专家级决策系统——不是教CSS布局，而是在框架选型、渲染瓶颈、工程架构这些关键岔路帮你做对选择。 ## 项目类型路由器 ## 框架选择矩阵 ### React vs Vue vs Svelte vs Angular | 维度 | React 19 | Vue 3 | Svelte 5 | Angular 17+ | |------|----------|-------|----------|-------------| | 包大小(gzip) | 42KB | 33KB | 2KB(编译时) | 65KB | | 学习曲线 | 中( Hooks心智模型) | 低(渐进式) | 低(最接近原生) | 高(完整框架) | | SSR | Next.js/RSC | Nuxt 3 | SvelteKit | Angular Universal | | 类型支持 | TS优秀 | TS良好 | TS良好 | TS原生 | | 生态规模 | ★★★★★ | ★★★★☆ | ★★★☆ | ★★★★ | | 大型项目 | ★★★★★ | ★★★★☆ | ★★★☆ | ★★★★★ | | 性能天花板 | ★★★★(需优化) | ★★★★☆ | ★★★★★ | ★★★☆ | | **推荐场景** | 生态最广/团队协作 | 渐进式/快速交付 | 极致性能/小团队 | 企业级/Google生态 | **决策规则**: - 团队已有React经验 → 继续React，不要换 - 新项目且团队小(≤5人) → Vue 3 或 Svelte，开发效率更高 - 企业级后台(复杂表单+权限) → Angular或React+Ant Design Pro - 性能极端敏感(C端活动页) → Svelte(编译时优化无运行时开销) - 需要最大生态(组件库/工具) → React(没有的库基本不存在) ## 构建工具决策 | 工具 | 开发启动 | HMR | 构建 | 生态 | 推荐度 | |------|---------|-----|------|------|--------| | Vite 6 | <300ms | <50ms | 快(esbuild+Rollup) | ★★★★★ | 首选(95%场景) | | Turbopack | 快 | 快 | 稳定性提升中 | ★★★(Next.js专属) | Next.js项目 | | Webpack 5 | 慢(10-30s) | 慢(1-3s) | 成熟 | ★★★★★ | 遗留项目维护 | **规则**: 新项目一律Vite，不要为了"成熟"选Webpack——Vite的生态已经足够。 ## CSS方案决策 | 方案 | 适用场景 | DX | 性能 | 可维护性 | |------|---------|-----|------|----------| | Tailwind CSS | 快速开发/设计系统 | ★★★★★ | ★★★★★(原子CSS) | ★★★★(需约定) | | CSS Modules | 组件隔离/中大型 | ★★★★ | ★★★★★ | ★★★★★ | | Styled Components | React动态样式 | ★★★★ | ★★★(运行时) | ★★★★ | | Vanilla Extract | 类型安全CSS | ★★★ | ★★★★★(编译时) | ★★★★★ | **规则**: - 新项目默认 Tailwind — 原子CSS最小化样式冲突，JIT零冗余 - 需要"CSS-in-JS"类型安全 → Vanilla Extract(Panda CSS) — 不要用运行时方案 - 已有设计系统 → CSS Modules最稳 ## Canvas/WebGL游戏开发专项 ### 游戏循环架构 **关键决策**: - 物理/逻辑用固定步长(60fps) — 避免浮点误差累积 - 渲染用可变步长 — 插值避免画面抖动 - 不要在requestAnimationFrame里做DOM操作 — Canvas/WebGL全部在渲染上下文操作 ### 性能优化矩阵 | 优化手段 | 收益 | 适用场景 | |----------|------|----------| | 对象池 | 减少GC停顿 | 子弹/粒子/列表 | | 空间分区(四叉树) | O(n²)→O(n log n) | 碰撞检测/范围查询 | | 脏矩形渲染 | 减少50%+绘制 | 局部更新场景 | | 纹理图集 | 减少DrawCall | 2D精灵游戏 | | LOD | 远处简化 | 3D场景 | | Web Worker | 主线程不卡 | 物理/AI/路径计算 | ## 性能优化清单 ### Core Web Vitals | 指标 | 目标 | 优化手段 | |------|------|----------| | LCP | <2.5s | SSR/预加载关键资源/图片优化 | | INP | <200ms | 长任务拆分/虚拟列表/防抖 | | CLS | <0.1 | 尺寸预留/字体swap/骨架屏 | ### 渲染优化 1. **避免强制同步布局**: 读offsetWidth后立即写style — 批量读→批量写 2. **虚拟列表**: 列表>100条必须虚拟化 — react-window/vue-virtual-scroller 3. **React.memo/useMemo**: 不是越多越好 — 只在渲染开销>比较开销时用 4. **图片懒加载**: `loading="lazy"` + IntersectionObserver — 首屏外的图片 ## 质量门控三级清单 ### L1-必须 - [ ] TypeScript strict模式 - [ ] ESLint + Prettier统一配置 - [ ] 构建产物<500KB(gzip后首屏JS) - [ ] LCP<2.5s, INP<200ms, CLS<0.1 - [ ] 无console.log残留 ### L2-应该 - [ ] 单元测试覆盖核心逻辑>70% - [ ] 组件Storybook文档 - [ ] 错误边界(ErrorBoundary) - [ ] 降级方案(SSR失败→CSR) ### L3-建议 - [ ] E2E测试(Playwright) - [ ] 性能预算(eslint-plugin-compat) - [ ] A/B测试基础设施 - [ ] 微前端(仅多团队大型项目) ## 10个常见错误模式 1. **过度状态管理**: 全局状态塞了只在一个组件用的数据 — 就近原则，能local就不global 2. **useEffect地狱**: 10个useEffect互相依赖 — 用useReducer或状态机替代 3. **Bundle爆炸**: lodash全量引入 — 用lodash-es按需或原生替代 4. **水合不匹配**: SSR输出和客户端渲染不一致 — 确保服务端和客户端使用相同数据 5. **CSS层叠冲突**: 全局样式污染 — CSS Modules或Tailwind原子化 6. **图片未优化**: 原图2MB直接用 — WebP/AVIF + 响应式srcset + 懒加载 7. **内存泄漏**: 定时器/监听器未清理 — useEffect return中cleanup 8. **渲染抖动**: 列表无稳定key — 用唯一ID而非index 9. **过度抽象**: 3个组件就抽Hook — 等出现第3次重复再抽象 10. **SSR滥用**: 所有页面都SSR — 静态页面用SSG，动态页面用SSR ## 执行流程 1. **需求分析** → 用路由器确定项目类型+框架 2. **技术选型** → 用矩阵选择框架+构建+CSS方案 3. **架构设计** → 状态管理+路由+渲染模式 4. **开发规范** → TypeScript+ESLint+组件设计模式 5. **性能验收** → Core Web Vitals+Bundle分析 6. **上线** → CDN+监控+降级方案 ## 2026平台实战洞察 > 本章节整合深度行业调研数据，为前端开发决策提供最新基准参考。 ### 关键数据点 #### 1. React 19.2核心新特性 - **use() Hook**: 可在渲染中读取Promise/Context，打破Hooks顺序限制 - **Actions**: 原生支持表单提交状态管理，简化pending/error处理 - **React Compiler**: 自动记忆化，Babel插件已稳定，体积增加<5% - **Server Components**: RSC成为Next.js 15默认，性能提升显著 - **置信度**: [HIGH] - React官方博客 #### 2. 构建工具Vite 6成熟 - **启动速度**: <300ms(esbuild预构建) - **HMR**: <50ms，体感零延迟 - **新特性**: 更好的monorepo支持，原生CSS @import处理 - **插件生态**: 95%场景已有成熟插件 - **置信度**: [HIGH] - Vite官方发布 #### 3. Tailwind CSS v4.1 Oxide引擎 - **性能**: Oxide引擎替代Rust编译器，启动速度提升10x - **新特性**: CSS @property支持，容器查询(Container Queries)原生支持 - **生态**: 组件库(Tailwind UI/Shadcn/ui)生态完善 - **置信度**: [HIGH] - Tailwind官方公告 #### 4. CSS新特性生产可用 - **Container Queries**: `@container`实现真正组件级响应式 - **Cascade Layers**: `@layer`解决样式优先级冲突，替代!important - **@starting-style**: 实现入场动画，解决DOM插入闪烁 - **:has()选择器**: 父选择器，简化条件样式 - **置信度**: [HIGH] - 主流浏览器已全部支持 #### 5. 前端性能基准 - **LCP目标**: <2.5s → 2026年建议<2.0s(用户期望提升) - **INP目标**: <200ms → 交互响应成为核心指标 - **Bundle策略**: 代码分割+懒加载，首屏JS<200KB(gzip) - **置信度**: [HIGH] - Google Web Vitals标准 ### 决策建议 1. **React项目**: 升级到React 19.2，启用Compiler，主动使用use()和Actions 2. **Vue项目**: Vue 3 + Vapor Mode(实验性，性能提升显著) 3. **CSS方案**: Tailwind v4.1优先，掌握Container Queries和@layer 4. **构建**: Vite 6为首选，Webpack仅用于遗留项目 5. **性能监控**: 接入Web Vitals实时监控，INP权重提升 --- ## 项目类型路由深度决策树 ### 1. SPA（单页应用）完整决策矩阵 #### 1.1 SPA适用场景判断 #### 1.2 SPA技术栈推荐谱系 **选项A：React技术栈（企业级首选）** | 层级 | 技术选型 | 说明 | |------|---------|------| | 框架 | Next.js 15 (App Router) | RSC默认，全方位SSR/SSG/ISR支持 | | UI组件 | shadcn/ui + Radix UI | 无障碍、类型安全、可定制 | | 状态管理 | Zustand / Jotai | 轻量级，React 19兼容 | | 路由 | Next.js App Router | 文件约定式，布局嵌套 | | 数据获取 | TanStack Query / Server Actions | 缓存策略、内置防抖 | | 表单 | React Hook Form + Zod | 性能优秀、类型推断 | | 构建 | Vite 6 + Turbopack(Next.js) | 极速HMR | | 样式 | Tailwind CSS v4.1 | JIT + Oxide引擎 | | 测试 | Vitest + React Testing Library | 组件测试 | | E2E | Playwright | 跨浏览器测试 | **选项B：Vue技术栈（快速交付首选）** | 层级 | 技术选型 | 说明 | |------|---------|------| | 框架 | Vue 3.4+ + Composition API | Vapor Mode实验性 | | 生态 | Nuxt 3 (可选SSR) | 渐进式框架 | | UI组件 | Naive UI / Element Plus | 中文友好、文档完善 | | 状态管理 | Pinia | Vue官方推荐 | | 路由 | Vue Router 4 | 组件化路由 | | 构建 | Vite 6 | 原生支持 | | 样式 | UnoCSS / Tailwind | 原子化CSS | | 测试 | Vitest + Vue Test Utils | 集成友好 | **选项C：Svelte技术栈（极致性能首选）** | 层级 | 技术选型 | 说明 | |------|---------|------| | 框架 | Svelte 5 + SvelteKit | Runes响应式语法 | | UI组件 | Skeleton / svelte-headlessui | 轻量组件库 | | 状态管理 | Svelte Stores | 原生响应式 | | 路由 | SvelteKit | 文件路由 | | 构建 | Vite 6 + svelte-plugin | 超快构建 | | 样式 | Tailwind CSS | 兼容良好 | **选项D：Angular技术栈（大型企业首选）** | 层级 | 技术选型 | 说明 | |------|---------|------| | 框架 | Angular 17+ (standalone) | 模块化现代化 | | UI组件 | Angular Material | 官方Material实现 | | 状态管理 | NgRx / Signals | 可预测状态 | | 构建 | Angular CLI + esbuild | 优化构建 | | 样式 | Angular Material + SCSS | 企业设计系统 | #### 1.3 SPA架构模式选择 ### 2. SSR（服务端渲染）深度决策 #### 2.1 渲染模式全景图 #### 2.2 Next.js 15 App Router深度指南 **路由组与布局策略**： **Server vs Client Components策略**： **Streaming与Suspense最佳实践**： #### 2.3 Nuxt 3 SSR配置深度 ### 3. 小程序跨端开发完整方案 #### 3.1 跨端框架对比矩阵 | 框架 | 渲染方式 | 生态 | 性能 | 学习成本 | 最佳场景 | |------|---------|------|------|---------|---------| | **Taro(React)** | React语法→多端 | ★★★★☆ | 中 | 低(React) | React团队首选 | | **uni-app(Vue)** | Vue语法→多端 | ★★★★★ | 中 | 低(Vue) | Vue团队/国内生态 | | **React Native** | React Native | ★★★★☆ | 高 | 中 | 原生体验App | | **Wechaty** | 微信生态 | ★★★★☆ | 高 | 中 | 微信相关工具 | | **Electron** | Web→桌面 | ★★★★★ | 低 | 低 | 桌面应用 | | **Tauri** | Web→桌面 | ★★★☆☆ | 高 | 中 | 轻量桌面应用 | #### 3.2 Taro 4.x + React 19最佳实践 **项目初始化**： **Taro配置**： **跨端条件编译**： #### 3.3 uni-app + Vue 3最佳实践 **目录结构**： **条件编译**： ### 4. 游戏开发专项深度指南 #### 4.1 2D游戏引擎选型决策树 #### 4.2 Phaser 3完整架构模式 **游戏主类设计**： #### 4.3 Canvas 2D渲染优化实战 **脏矩形渲染系统**： **对象池实现**： #### 4.4 WebGL/Three.js 3D游戏基础 **场景初始化**： #### 4.5 游戏资源管理系统 --- ## 框架选择矩阵深度对比（2026版） ### React 19.2深度解析 #### 核心架构演进 #### React 19新特性详解 **1. use() Hook 突破性用法**： **2. Actions 简化表单处理**： **3. React Compiler 工作原理**： ### Vue 3.5深度解析 #### Vapor Mode 性能飞跃 #### 响应式系统Runes ### Svelte 5 Runes模式 ### 框架深度对比表（2026年） | 维度 | React 19.2 | Vue 3.5 | Svelte 5 | Angular 18 | |------|------------|---------|----------|------------| | **渲染性能** | ★★★★☆ | ★★★★☆ | ★★★★★ | ★★★☆☆ | | **首屏性能(SSR)** | ★★★★★ | ★★★★☆ | ★★★★☆ | ★★★★☆ | | **开发体验** | ★★★★☆ | ★★★★★ | ★★★★★ | ★★★☆☆ | | **TypeScript支持** | ★★★★★ | ★★★★☆ | ★★★★☆ | ★★★★★ | | **包大小(gzip)** | 42KB | 33KB | 2KB | 65KB | | **学习曲线** | 中高 | 低 | 低 | 高 | | **生态规模** | ★★★★★ | ★★★★☆ | ★★★☆☆ | ★★★★☆ | | **企业采用率** | 65% | 20% | 5% | 8% | | **SSR原生支持** | Next.js 15 | Nuxt 3 | SvelteKit | Angular Universal | | **RSC/Islands** | ✅ 原生 | 需配置 | SvelteKit | 实验性 | | **编译时优化** | React Compiler | Vapor Mode | 原生 | 有限 | | **移动端** | React Native | uni-app/Taro | Svelte Native | Ionic/NativeScript | --- ## 构建工具深度决策树 ### 构建工具演进史 ### 选型决策树 ### Vite 6深度配置 ### Webpack 5深度配置（遗留项目维护） ### Turbopack配置（Next.js专用） --- ## CSS方案深度决策 ### CSS架构演进 ### Tailwind CSS v4.1深度指南 **配置与扩展**： **最佳实践组件模式**： ### CSS Modules深度指南 **命名规范（BEM变体）**： **类型安全使用**： ### 样式方案对比深度分析 | 维度 | Tailwind CSS | CSS Modules | Styled Components | Vanilla Extract | |------|-------------|-------------|-------------------|-----------------| | **学习成本** | 中（需记忆类名） | 低 | 中（JS语法） | 中（TypeScript） | | **运行时开销** | 0 | 0 | 有（JS-in-CSS） | 0（编译时） | | **IDE支持** | ★★★★☆ | ★★★★★ | ★★★★☆ | ★★★★★ | | **调试** | 类名难追踪 | 文件对应清晰 | DevTools好 | 源文件映射 | | **动态样式** | 需要组合类 | JS变量 | 原生支持 | 主题变量 | | **Tree-shaking** | JIT自动 | 手动 | 运行时决定 | 编译时决定 | | **设计系统** | 主题配置 | 变量+混合 | ThemeProvider | CSS变量 | | **首屏性能** | 最佳 | 最佳 | 较差 | 最佳 | | **适用场景** | 快速开发/定制 | 组件库/企业 | 动态主题 | 类型安全优先 | ### 容器查询实战 --- ## 性能优化深度指南 ### Core Web Vitals优化SOP #### LCP（最大内容绘制）< 2.5s **图片优化清单**： #### INP（交互到下一绘制）< 200ms **长任务拆分**： #### CLS（累积布局偏移）< 0.1 **骨架屏实现**： ### 代码分割深度策略 **React.lazy + Suspense**： **Webpack手动分包**： ### 渲染优化深度实践 #### React渲染优化 #### Vue渲染优化 ### 图片优化完整方案 --- ## 2026年前端趋势深度洞察 ### Server Components架构演进 ### Islands架构框架对比 | 框架 | 实现方式 | 特点 | 适用场景 | |------|---------|------|---------| | **Astro 4** | 组件孤岛 | 零JS默认，可选水合 | 内容站、博客 | | **Qwik** | Resumability | 根本不需要水合 | 高性能站点 | | **Fresh(Deno)** | Islands | Deno专属，轻量 | Deno项目 | | **Marko** | 渐进式水合 | 智能水合策略 | 复杂应用 | ### AI辅助前端开发 ### WebAssembly生态成熟 ### 2026年前端技术栈推荐 --- ## 10个常见错误模式深度解析 ### 错误模式1: 过度状态管理 **症状诊断**: **问题分析**: - 状态分散在多个Store中，难以追踪 - 无关组件重新渲染 - 维护成本指数增长 **正确做法**: **决策流程**: --- ### 错误模式2: useEffect依赖地狱 **症状诊断**: **正确做法**: --- ### 错误模式3: Bundle体积爆炸 **症状诊断**: **正确做法**: **Bundle分析工具**: --- ### 错误模式4: SSR/CSR水合不匹配 **症状诊断**: **正确做法**: --- ### 错误模式5: CSS样式冲突 **症状诊断**: **正确做法**: --- ### 错误模式6: 图片未优化 **症状诊断**: **正确做法**: --- ### 错误模式7: 内存泄漏 **症状诊断**: **正确做法**: --- ### 错误模式8: 渲染抖动（列表key问题） **症状诊断**: **正确做法**: --- ### 错误模式9: 过度抽象 **症状诊断**: **正确做法**: --- ### 错误模式10: SSR滥用 **症状诊断**: **正确做法**: --- ## 质量门控三级清单（深度版） ### L1 - 门禁检查（CI/CD必过） #### 代码质量 - [ ] TypeScript strict模式启用 - [ ] ESLint零错误（Error级别） - [ ] Prettier格式化通过 - [ ] 无TODO/FIXME注释遗留 - [ ] 无console.log/console.error（生产构建） #### 构建产物 - [ ] 首屏JS < 200KB (gzip) - [ ] 首屏CSS < 50KB (gzip) - [ ] 无重复依赖bundled - [ ] Tree-shaking生效 - [ ] 代码分割生效 #### 性能指标 - [ ] Lighthouse Performance > 90 - [ ] LCP < 2.5s - [ ] INP < 200ms - [ ] CLS < 0.1 - [ ] TTFB < 600ms #### 安全 - [ ] 无内联脚本（避免XSS） - [ ] CSP配置正确 - [ ] 敏感信息不打包 - [ ] 依赖无已知漏洞（npm audit） #### 可访问性 - [ ] 所有图片有alt属性 - [ ] 表单有关联label - [ ] 颜色对比度符合WCAG 2.1 AA - [ ] 键盘可导航 ### L2 - 质量保障（发布前检查） #### 测试覆盖 - [ ] 单元测试覆盖率 > 70% - [ ] 关键业务逻辑 100% 覆盖 - [ ] 组件快照测试 - [ ] E2E测试（核心流程） #### 错误处理 - [ ] ErrorBoundary组件 - [ ] API错误处理 - [ ] 网络错误降级 - [ ] 错误日志上报 #### 文档 - [ ] README.md完整 - [ ] API文档（API.md或Swagger） - [ ] 组件Storybook > 80% - [ ] 部署文档 #### 监控 - [ ] 性能监控接入 - [ ] 错误监控接入（Sentry） - [ ] 用户行为埋点 - [ ] 业务指标埋点 ### L3 - 最佳实践（持续改进） #### 架构 - [ ] 微前端（仅>3团队项目） - [ ] monorepo架构（>2个包） - [ ] CI/CD自动化 - [ ] 蓝绿部署/金丝雀 #### 性能 - [ ] 性能预算（eslint-plugin-compat） - [ ] 预加载关键资源 - [ ] 预连接关键域名 - [ ] Service Worker缓存 #### 体验 - [ ] 骨架屏/Loading状态 - [ ] 降级方案（SSR失败→CSR） - [ ] PWA支持（可选） - [ ] 国际化（i18n） #### 创新 - [ ] A/B测试基础设施 - [ ] 功能开关（Feature Flag） - [ ] 实验追踪 - [ ] 用户反馈机制 --- ## 执行流程详解 ### 标准开发流程 ### 技术选型checklist --- ## 附录：速查表 ### 性能优化速查 ### 命令速查 ### 配置速查 --- > **文档版本**: 2026.1 > **维护者**: 前端开发决策引擎 > **更新频率**: 每季度 > **置信度**: [HIGH] - 基于2024-2025行业最佳实践