phase 5 part 2: vite 8, webpack 5, fe-testing-perf topics with verified examples

topics/frontend/fe-testing-perf/index.md

@@ -4,12 +4,40 @@ title: 前端测试与性能
 type: index
 domain: frontend
 stack: [fe-testing-perf]
-tags: []
+tags: [Vitest, Testing Library, Playwright, Web Vitals, 性能优化]
 week: [7]
 ---
 
 # 前端测试与性能
 
-Vitest、组件测试、Web Vitals、性能优化。
+测试（证明代码正确，也是验证 AI 生成代码的手段）和性能（Core Web Vitals、长任务）。七年前端经验最能体现深度的部分之一。
 
-> 本专题建设中：课程、企业场景、面试题和示例代码会陆续补充。
+## 学习路线
+
+| 顺序 | 课程 | 级别 | 预计 |
+| --- | --- | --- | --- |
+| 1 | [前端测试：Vitest 单元测试、Testing Library 组件测试、Playwright 端到端测试](01-testing-pyramid.md) | 进阶 | 2.5 小时 |
+| 2 | [前端性能：Core Web Vitals（LCP / INP / CLS）、长任务和优化清单](02-web-vitals.md) | 进阶 | 2.5 小时 |
+
+## 企业场景
+
+- [性能治理：真实用户监控、定位慢页面、CI 性能预算和测试防回归](scenarios/perf-regression.md)
+
+## 面试题
+
+- [前端测试与性能面试题](interview.md)
+
+## 示例代码
+
+- [examples/search-box](examples/search-box/)：防抖 + 中止旧请求的搜索组件及 3 个组件测试（vitest 通过）、长任务切块 `chunked.ts`（可直接运行）、Playwright 端到端测试示意
+
+## 在 16 周计划中
+
+- [第 7 周：前端工程化查漏](../../../plan/week07-frontend.md)
+
+## 官方资料
+
+- https://vitest.dev/
+- https://testing-library.com/
+- https://playwright.dev/
+- https://web.dev/articles/vitals