WHY IT MATTERS
先用一句白话理解
上线不是把样板房照片发出去，而是让整栋楼通过消防、供电、无障碍和物业验收，并且出问题时能知道故障发生在哪一层。
LEARNING OUTCOMES
学完你能做到什么
按业务能力划分模块并控制跨层依赖
建立设计系统、可访问组件与渐进增强策略
用性能预算治理首屏、交互、脚本和图片成本
防范 XSS、CSRF、敏感数据泄漏与依赖供应链风险
使用错误边界、结构化日志与链路信息定位线上故障
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
业务模块与依赖边界
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
设计系统
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
SSR 与 Hydration 故障
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
缓存分层与 CDN
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
性能预算
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
XSS、CSRF 与 CSP
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
无障碍与键盘操作
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
错误边界与可观测性
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
灰度发布与回滚
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
重构一个相互引用的功能目录并建立依赖规则
为核心页面制定和自动检查性能预算
完成一次 XSS、秘密泄漏与权限绕过演练
从错误页面追踪到具体请求、版本和业务操作
HANDS-ON PROJECT
动手任务
接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。
交付清单
- ✓架构边界与决策记录
- ✓性能、安全和无障碍验收报告
- ✓线上故障演练与回滚手册
MINIMUM RUNNABLE CODE
把性能目标写成可执行预算
type Metrics = { lcp: number; inp: number; jsKb: number };
const budget: Metrics = { lcp: 2500, inp: 200, jsKb: 180 };
function passes(metrics: Metrics) {
return (
metrics.lcp <= budget.lcp &&
metrics.inp <= budget.inp &&
metrics.jsKb <= budget.jsKb
);
}
console.log(passes({ lcp: 2100, inp: 160, jsKb: 170 }));先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 重构一个相互引用的功能目录并建立依赖规则
- 为核心页面制定和自动检查性能预算
- 完成一次 XSS、秘密泄漏与权限绕过演练
- 从错误页面追踪到具体请求、版本和业务操作
改变约束，验证你真的理解
- 不看教程，独立完成：按业务能力划分模块并控制跨层依赖
- 不看教程，独立完成：建立设计系统、可访问组件与渐进增强策略
- 不看教程，独立完成：用性能预算治理首屏、交互、脚本和图片成本
- 不看教程，独立完成：防范 XSS、CSRF、敏感数据泄漏与依赖供应链风险
- 不看教程，独立完成：使用错误边界、结构化日志与链路信息定位线上故障
把实验变成能交付的工程
- 架构边界与决策记录
- 性能、安全和无障碍验收报告
- 线上故障演练与回滚手册
- 检查缓存、Hydration、错误恢复、可观测性和部署约束，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
只优化 Lighthouse 分数而忽略真实用户和业务路径
把前端权限隐藏误认为服务端授权
错误日志包含 Token、邮箱或其他敏感数据
为了所谓架构纯洁度引入大量没有业务收益的抽象
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
把能运行的项目升级为可长期维护的产品：建立业务边界、设计系统、性能预算、安全基线、无障碍标准和故障定位能力。
Q02如果只能保留三个验收结果，应该保留什么？＋
架构边界与决策记录；性能、安全和无障碍验收报告；线上故障演练与回滚手册
Q03学习过程中最需要主动避免什么？＋
只优化 Lighthouse 分数而忽略真实用户和业务路径；把前端权限隐藏误认为服务端授权；错误日志包含 Token、邮箱或其他敏感数据；为了所谓架构纯洁度引入大量没有业务收益的抽象
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“接手一个故意包含性能、安全、无障碍和架构问题的系统，并完成生产加固。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：按业务能力划分模块并控制跨层依赖
- □核心机制已用最小实验验证：重构一个相互引用的功能目录并建立依赖规则
- □风险已检查：只优化 Lighthouse 分数而忽略真实用户和业务路径
- □风险已检查：把前端权限隐藏误认为服务端授权
- □风险已检查：错误日志包含 Token、邮箱或其他敏感数据
- □风险已检查：为了所谓架构纯洁度引入大量没有业务收益的抽象
- □交付物可复现：架构边界与决策记录
- □交付物可复现：性能、安全和无障碍验收报告
- □交付物可复现：线上故障演练与回滚手册
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。