偏工程体系的前端总装图，回答页面开发如何走向浏览器理解、工程治理、质量体系与稳定交付 (2025-2026)
| 上层 | 依赖的下层 | 关系说明 |
|---|---|---|
| TypeScript 与构建 | 浏览器基础 | 不理解事件循环、DOM、网络和渲染流程，TS 再熟也很难真正定位复杂前端问题 |
| 应用框架 | 工程语言层 | React/Vue 只是组织 UI 的方式，状态、模块、构建、路由仍然建立在 JS/TS 与浏览器之上 |
| 工程治理 | 应用框架 | 测试、规范、性能预算和错误监控必须贴着具体应用结构来设计，不能脱离项目上下文 |
| 交付平台 | 工程治理 | 没有稳定构建、可观测性和质量门禁，CI/CD 只是在更快地把问题发到线上 |
| SSR / RSC / 同构 | 浏览器 + Node 运行时 | 前端工程逐渐从纯浏览器端扩展到边缘、服务端和构建阶段，运行时边界越来越模糊 |
| 微前端 | 工程治理 + 发布机制 | 微前端不是拆路由而已，核心难点在依赖隔离、共享协议、发布治理和团队协同 |
前端工程的地基是浏览器：DOM、CSSOM、Layout、Paint、Composite、Event Loop、Task / Microtask。
白屏、卡顿、内存泄漏、事件异常、重排重绘、长任务阻塞，本质都要回到浏览器模型解释。
Event Loop: 宏任务、微任务、渲染时机；缓存: HTTP 缓存、Service Worker、CDN；安全: XSS、CSRF、CSP、SameSite。
TypeScript 不只是类型提示，而是让大型前端项目具备可重构、可协作、可沉淀接口约束的能力。
ESM 已成为现代前端生态的主流基线。理解 tree-shaking、side effects、动态 import、路径别名和包导出字段很关键。
真正难的不是写 interface，而是控制 any 扩散、约束共享模型、保持类型与后端契约一致。
UI 本地状态、表单状态、缓存状态、服务端异步状态是四类不同问题，不该用一个工具强行统一。
本地状态: React State / Context / Zustand / Jotai；服务端状态: TanStack Query / SWR；全局复杂状态: Redux Toolkit / Pinia。
如果你把所有数据都塞进全局 store，十有八九会把简单问题做复杂。缓存、请求状态和表单状态应该优先就地处理。
Webpack 擅长复杂生态整合；Vite / esbuild / SWC / Rspack 更强调开发速度与更现代的默认体验。
冷启动时间、HMR 延迟、生产构建时间、产物体积、代码分割策略、Source Map 质量。
前端构建工具选择的核心不是“谁更新”，而是“谁更适合你的项目复杂度、团队熟悉度和 CI 预算”。
| 方案 | 定位 | 强项 | 代价 | 适合场景 |
|---|---|---|---|---|
| React + Next.js | 全能型 | 生态成熟、SSR/RSC 能力强、企业采用广 | 抽象多、版本节奏快、学习边界宽 | 中大型产品、全栈前端、平台型应用 |
| Vue + Nuxt | 平衡型 | 上手顺滑、模板语法友好、社区成熟 | 大型复杂状态治理仍需经验 | 中后台、内容站、团队协作型产品 |
| Svelte / SvelteKit | 轻量现代 | 语法简洁、运行时代价低、开发体验好 | 生态与招聘市场相对小 | 新项目、性能敏感应用、个人产品 |
| Remix | Web-first | 强调表单、路由、原生 Web API、数据流清晰 | 社区相对 Next 小，心智和传统 SPA 不同 | 偏交互型、偏服务端驱动的应用 |
真正完整的交付链路应包含：PR 检查、静态分析、单测、E2E、预览环境、构建产物校验、灰度发布、错误监控、回滚机制。
CDN 缓存失效、Source Map 上传、静态资源哈希、Feature Flag、A/B 实验、埋点版本一致性。
如果上线后第一件事是“手动清缓存、手动补配置、手动盯日志”，说明前端交付链路还没工程化完成。
| 类型 | 重点 | 工程策略 |
|---|---|---|
| 中后台 | 表单、权限、表格、稳定性、研发效率 | 组件库、低心智路由、统一请求层、权限模型、埋点规范 |
| ToC 产品 | 性能、体验、增长、实验、跨端一致性 | 性能预算、灰度、A/B、RUM 监控、设计系统 |
| 内容站 / SEO 场景 | 首屏、抓取、缓存、SSR/SSG | 服务端渲染、静态生成、ISR、边缘缓存 |
| 检查项 | 至少确认什么 | 常见翻车点 |
|---|---|---|
| 资源指纹 | JS / CSS / 图片是否带内容哈希，HTML 是否引用新产物 | 主页面更新了，但用户仍命中旧 bundle，出现白屏或版本错配 |
| CDN 缓存策略 | HTML、静态资源、接口代理层的缓存时间和刷新策略分开设计 | 把 HTML 和静态资源一把梭长缓存，导致入口页长期指向旧资源 |
| Source Map 与版本号 | 错误监控平台是否上传对应版本 Source Map，埋点是否打上发布号 | 线上报错能看到堆栈，却无法还原源码，也无法知道问题属于哪次发布 |
| Feature Flag / 灰度 | 开关默认值、回滚路径、老版本兼容窗口是否明确 | 开关发布和代码发布不同步，部分用户进入“代码有了但配置没跟上”的状态 |
| 回滚策略 | 是否能快速切回旧静态资源、旧配置和旧实验分流 | 代码能回滚，但 CDN / 配置 / 埋点版本没有一起回退，问题仍持续 |
全栈前端继续增强: 数据获取、缓存、渲染和部署边界会继续融合，前端需要理解更多服务端与平台语境。
TypeScript 继续巩固工程基线: 在大型项目和团队协作中，TS 越来越像常见默认选择，重点会转向“怎么用得更健康”。
性能与观测成为常规工程要求: 前端会越来越像后端一样，需要对线上行为负责。
RSC / Edge Rendering: React 生态会继续推动前后边界重构，但团队仍需谨慎评估复杂度收益比。
AI 辅助前端开发: UI 生成、重构、测试编写会越来越快，但设计系统和业务约束仍然需要人来守。
前端平台化: 模板、埋点、组件、质量门禁、发布环境会进一步产品化。
抽象过载: 太多层封装会让简单页面变得不可维护，尤其在快速迭代团队中。
只追新不追稳: 前端更新很快，但工程体系的第一目标永远是稳定交付。
忽视无障碍与国际化: 很多团队直到业务扩大后才意识到这不是“加一个插件”能补上的。