前端架构师技术栈全景学习文档

适合人群：已经具备前端项目经验，希望从高级前端工程师成长为前端架构师、技术负责人或工程化负责人的学习者。
学习目标：先建立完整技术栈地图，再按“基础能力、工程能力、架构能力、生产稳定性、团队治理”逐步深入，避免只学零散工具。
核对时间：2026-06-30。本文综合参考 MDN、web.dev、W3C/WCAG、OWASP、OpenTelemetry、React/Vue/Next.js、Vite/Webpack、Turborepo/Nx、Playwright/Vitest/Testing Library、Storybook、Module Federation、single-spa 等官方资料和当前前端岗位能力要求整理。

前端架构师的定位
能力分层总览
必须掌握的技术栈矩阵
第一层：Web 基础与浏览器能力
第二层：语言与类型系统
第三层：框架、渲染与状态管理
第四层：工程化与构建体系
第五层：架构设计与大型应用治理
第六层：性能、安全、可访问性与稳定性
第七层：测试、CI/CD 与发布体系
第八层：可观测性与线上问题治理
第九层：设计系统、组件库与体验一致性
第十层：团队规范、技术决策与架构治理
学习路线：由基础到高阶
面试与真实工作中的考察方式
文档阅读顺序建议
官方参考资料

1. 前端架构师的定位

前端架构师不是“会很多框架的人”，也不是“写组件更快的人”。前端架构师的核心价值是：在复杂业务、多人协作、长期演进和生产稳定性之间做技术设计，并让团队能持续、高质量地交付前端系统。

一个合格前端架构师通常要负责：

设计前端应用架构。
选择技术栈和升级路线。
建立工程化标准。
治理 Monorepo、构建、依赖、发布流程。
设计组件库和设计系统落地方式。
制定代码规范、测试规范、性能预算、安全规范。
解决大型项目的模块边界、状态管理、数据流、缓存、渲染策略问题。
处理线上性能、稳定性、兼容性和可观测性。
指导团队从“能跑”走向“可维护、可扩展、可治理”。

1.1 高级前端与前端架构师的区别

高级前端工程师重点是把复杂功能做对、做好。

前端架构师重点是让很多人、很多模块、很多版本在长期变化中仍然可控。

维度	高级前端工程师	前端架构师
关注点	功能质量与模块实现	系统结构与长期演进
技术决策	选择局部方案	设计全局技术路线
工程化	使用工具	建立标准和平台
性能	优化具体页面	建立性能预算和监控体系
测试	写测试	设计质量保障体系
架构	参与模块设计	负责边界、依赖、扩展、治理
影响范围	一个功能或项目	多项目、多团队、长期平台

2. 能力分层总览

前端架构师能力可以分成五大层：

2.1 基础能力

包括：

HTML、CSS、JavaScript。
浏览器渲染机制。
HTTP、缓存、网络协议。
TypeScript。
Web API。
跨端和兼容性基础。

这是所有架构设计的地基。不了解浏览器和网络，就很难做性能优化、缓存策略、渲染策略和稳定性治理。

2.2 应用开发能力

包括：

React / Vue / Angular / Svelte 等框架。
路由。
状态管理。
数据请求。
表单。
组件设计。
SSR / SSG / CSR。
国际化。
权限与路由守卫。

这是把业务系统做出来的能力。

2.3 工程化能力

包括：

Vite、Webpack、Rollup、Rspack、esbuild、SWC、Babel。
ESLint、Prettier、Stylelint。
npm、pnpm、Yarn。
Monorepo、Turborepo、Nx。
CI/CD。
版本管理。
构建缓存。
产物分析。
发布回滚。

这是让团队高效、稳定、可复制交付的能力。

2.4 架构与治理能力

包括：

应用分层。
模块边界。
领域建模。
API 契约。
微前端。
设计系统。
组件库。
技术债治理。
架构决策记录 ADR。
迁移策略。

这是前端架构师与普通工程师拉开差距的核心区域。

2.5 生产稳定性能力

包括：

性能优化。
安全。
可访问性。
测试体系。
可观测性。
错误监控。
Web Vitals。
日志、指标、链路追踪。
灰度发布。
应急回滚。

这是让系统在线上长期可靠运行的能力。

3. 必须掌握的技术栈矩阵

3.1 总体矩阵

技术领域	必备程度	架构师应掌握到什么程度
HTML / CSS / JS	必备	理解标准、兼容性、语义化、渲染和运行机制
TypeScript	必备	能设计类型边界、公共 API 类型、复杂泛型与渐进迁移
浏览器原理	必备	理解渲染流水线、事件循环、缓存、存储、安全模型
HTTP / CDN / 缓存	必备	能设计静态资源缓存、接口缓存、边缘缓存和失效策略
React / Vue 等框架	必备	至少精通一个，理解其他主流框架设计思想
状态管理	必备	能区分 UI 状态、服务端状态、表单状态、全局状态
数据请求与 API 契约	必备	掌握 REST、GraphQL、OpenAPI、错误处理、缓存与重试
Vite / Webpack / Rollup	必备	能配置、优化、排错、设计构建体系
Babel / SWC / esbuild	重要	理解转译、polyfill、AST、编译性能取舍
ESLint / Prettier	必备	能制定团队规则、写自定义规则、接入 CI
Monorepo	重要	能治理多包依赖、任务编排、缓存、发布
测试体系	必备	能设计单元、组件、集成、E2E、视觉回归测试策略
CI/CD	必备	能设计流水线、质量门禁、构建缓存、部署回滚
性能优化	必备	能基于 LCP、INP、CLS、RUM 建立优化闭环
安全	必备	掌握 XSS、CSRF、CSP、依赖安全、鉴权安全
可访问性	重要	掌握语义化、键盘操作、ARIA、WCAG 目标
可观测性	必备	能接入错误、性能、日志、指标、链路追踪
微前端	重要	理解适用边界、Module Federation、single-spa、隔离和治理
设计系统	重要	能落地 tokens、组件库、文档、版本和兼容策略
SSR / SSG / Edge	重要	能根据业务选择渲染模式和缓存策略
PWA / 离线能力	可选但加分	掌握 Service Worker、Cache API、更新策略
Node.js / BFF	重要	能设计前端配套服务、接口聚合、鉴权和部署
技术治理	必备	能写 ADR、做迁移计划、控制技术债、推动规范落地

3.2 不同业务类型的侧重点

后台管理系统：

权限模型。
表格、表单、路由、状态。
组件库。
工程化。
可维护性。
测试和发布稳定性。

电商和营销页：

LCP、CLS、SEO。
SSR / SSG / CDN。
图片和媒体优化。
A/B 测试。
转化率监控。
弱网体验。

SaaS 产品：

大型前端架构。
设计系统。
多租户和权限。
国际化。
数据可视化。
可观测性。

低代码 / 平台型产品：

插件系统。
schema 驱动。
沙箱和隔离。
动态渲染。
性能和安全。
可扩展架构。

多团队大型组织：

Monorepo。
微前端。
共享组件库。
统一规范。
发布治理。
架构决策机制。

4. 第一层：Web 基础与浏览器能力

4.1 HTML

必须掌握：

语义化标签。
表单。
可访问性基础。
SEO 基础。
script 加载策略。
preload / prefetch / preconnect。
图片响应式。

架构师关注点：

HTML 是资源发现的入口。
SSR 输出的 HTML 质量直接影响首屏、SEO 和可访问性。
语义化不只是规范，也影响屏幕阅读器、搜索引擎和自动化测试。

4.2 CSS

必须掌握：

盒模型。
布局：Flex、Grid、定位。
响应式。
层叠、继承、优先级。
动画和过渡。
CSS 变量。
容器查询。
CSS Modules / CSS-in-JS / Tailwind 等方案取舍。

架构师关注点：

样式方案会影响组件库、主题、性能和团队协作。
设计系统需要稳定 tokens，而不是只靠页面级 CSS。
CSS 也会导致性能问题，例如复杂选择器、频繁布局、昂贵滤镜。

4.3 JavaScript

必须掌握：

作用域和闭包。
原型和继承。
异步编程。
Promise、async / await。
事件循环。
模块系统。
内存管理。
错误处理。

架构师关注点：

JS 执行会阻塞主线程。
长任务会恶化 INP。
模块系统影响 tree shaking。
异步错误如果没有统一治理，会变成线上隐性故障。

4.4 浏览器原理

必须掌握：

DOM / CSSOM。
渲染流水线。
事件循环。
宏任务和微任务。
HTTP 缓存。
Cookie、LocalStorage、IndexedDB。
同源策略。
CSP。
Service Worker。

渲染流水线要能一口气讲清因果链：

text

HTML ──解析──► DOM ─┐
                    ├─► Render Tree ─► Layout ─► Paint ─► Composite
CSS  ──解析──► CSSOM┘                        （样式→布局→绘制→合成）
JS ──修改 DOM/CSSOM──► 触发上面一个或多个阶段

架构师需要由此推出的结论：

只有 transform / opacity 的变更可以跳过 Layout/Paint 直达 Composite，这是动画优化的原理依据。
JS 读几何属性（offsetHeight 等）会强制同步 Layout；写样式后再读是布局抖动的根源。
主线程单线程执行：长任务（>50ms）同时阻塞输入响应和下一帧绘制，直接恶化 INP。
DOM 规模影响的不只是首次渲染：元素越多，样式重算、布局、增量渲染越贵，交互时的 presentation delay 也越长。

事件循环则决定异步代码的真实顺序：一次宏任务 → 清空微任务队列 → （必要时）渲染。理解 requestAnimationFrame（渲染前）、requestIdleCallback（空闲期）、scheduler.yield()（让出但保优先级，Chrome/Edge 129 起稳定）三者的时机差异，才能把"拆长任务"落到正确的位置上。

架构师关注点：

性能优化离不开浏览器原理。
安全设计离不开浏览器安全模型。
离线和缓存离不开 Service Worker。
复杂交互离不开主线程和渲染机制理解。

展开学习见 前端性能优化系统学习文档.md 第 9、13 章与 浏览器原理HTTP_CDN缓存与BFF系统学习文档.md。

5. 第二层：语言与类型系统

5.1 TypeScript 是架构能力

TypeScript 不只是给变量加类型。对于大型项目，它是架构边界工具。

架构师要掌握：

公共 API 类型设计。
领域模型类型。
类型收窄。
泛型。
条件类型。
映射类型。
类型工具。
类型测试。
类型声明文件。
JS 项目渐进迁移 TS。

5.2 类型边界

重点不是把所有地方都写复杂类型，而是把关键边界类型化：

API 响应。
表单数据。
路由参数。
权限模型。
组件 props。
公共 hooks。
SDK 暴露接口。
跨包导出的类型。

5.3 类型系统常见误区

误区：

滥用 any。
过度泛型化。
把类型当业务校验。
忽略运行时数据校验。
公共类型和内部类型混在一起。

正确做法：

外部输入要运行时校验。
公共 API 类型稳定。
内部实现类型可以适度简化。
unknown 优先于 any。
类型复杂度服务于可维护性。

6. 第三层：框架、渲染与状态管理

6.1 框架选择

架构师至少要精通一个主流框架，并理解其他框架的核心思想。

常见框架：

React。
Vue。
Angular。
Svelte。
Solid。

选择框架要考虑：

团队经验。
生态成熟度。
招聘难度。
性能要求。
SSR / SSG 支持。
组件库生态。
长期维护。

6.2 渲染模式

必须理解：

CSR：客户端渲染。
SSR：服务端渲染。
SSG：静态生成。
ISR：增量静态再生成。
Streaming SSR：流式渲染。
Islands / Partial Hydration：局部水合。
Edge Rendering：边缘渲染。

选择原则：

后台系统通常 CSR 足够。
内容站和营销页优先 SSG / SSR。
电商详情页常用 SSR / ISR。
高交互应用要关注 hydration 成本。
全球用户要考虑 CDN 和边缘渲染。

6.3 状态管理

前端状态至少分成四类：

UI 状态：弹窗、展开、选中。
服务端状态：接口返回数据、缓存、加载状态。
表单状态：校验、脏状态、提交。
全局业务状态：登录用户、权限、主题、租户。

不要把所有状态都塞进一个全局 store。

常见工具：

Redux Toolkit。
Zustand。
Pinia。
TanStack Query。
Apollo Client。
React Hook Form。
VeeValidate。

6.4 数据请求与 API 契约

必须掌握：

REST。
GraphQL。
OpenAPI。
错误码设计。
请求取消。
重试与退避。
缓存与失效。
分页和无限滚动。
乐观更新。
幂等性。
鉴权刷新。

架构师关注点：

API 契约必须稳定。
前端不能只依赖接口文档口头约定。
OpenAPI / GraphQL schema 可以生成类型和客户端。
错误处理应该统一，而不是散落在页面里。

7. 第四层：工程化与构建体系

7.1 构建工具

必须理解：

Vite：现代开发服务器和构建工具。
Webpack：成熟 bundler，适合复杂遗留体系。
Rollup：库构建常用。
Rspack：Webpack 兼容思路的高性能构建工具。
esbuild：高速转译与打包。
SWC：高速编译器。

架构师不是“只会用脚手架”，而是能回答：

为什么启动慢？
为什么构建慢？
为什么产物大？
为什么 tree shaking 失败？
为什么某依赖被打进首屏？
为什么开发环境和生产环境行为不同？

7.2 编译与转译

必须理解：

Babel。
TypeScript compiler。
SWC。
esbuild。
polyfill。
Browserslist。
AST。

Babel 文档建议单独学习：Babel系统学习文档.md。

7.3 代码规范与静态检查

必须掌握：

ESLint。
Prettier。
Stylelint。
TypeScript strict。
commitlint。
lint-staged。

ESLint 文档建议单独学习：ESLint系统学习文档.md。

7.4 包管理

必须掌握：

npm。
pnpm。
Yarn。
lockfile。
workspaces。
dependency / devDependency / peerDependency。
semver。
依赖安全。
多版本依赖治理。

架构师要能处理：

依赖冲突。
包版本升级。
私有包发布。
workspace 协议。
peer dependency 兼容。
依赖重复导致包体积膨胀。

7.5 Monorepo

常见工具：

pnpm workspaces。
Turborepo。
Nx。
Rush。

必须理解：

多包依赖关系。
任务图。
本地缓存。
远程缓存。
affected projects。
统一 lint / test / build。
包发布。
版本策略。

Monorepo 不是万能药。只有当多个项目共享代码、工具链、组件或发布流程时，它才有明显收益。

8. 第五层：架构设计与大型应用治理

8.1 应用分层

常见分层：

text

src/
  app/          应用初始化、路由、全局 provider
  pages/        页面
  features/     业务功能模块
  entities/     领域实体
  shared/       通用工具、基础组件、请求封装

重点不是目录名字，而是依赖方向：

页面可以依赖功能模块。
功能模块可以依赖实体和 shared。
shared 不应该依赖业务模块。
公共组件不应该依赖具体页面。

8.2 模块边界

架构师要能定义：

哪些模块可以互相依赖。
哪些模块只能通过 public API 暴露。
哪些内部文件禁止跨模块 import。
哪些能力沉淀到 shared。
哪些业务逻辑保留在 feature 内部。

模块边界最好用工具约束：

ESLint 自定义规则。
Nx module boundaries。
TypeScript path mapping。
包边界。
CI 检查。

8.3 微前端

微前端适合：

多团队独立交付。
老系统渐进迁移。
大型应用按业务域拆分。
不同技术栈共存。

不适合：

小团队小项目。
只是为了“架构高级”。
没有独立发布需求。
共享状态和 UI 强耦合的系统。

常见方案：

Module Federation。
single-spa。
iframe。
Web Components。
构建时集成。
运行时集成。

核心难点：

路由协调。
样式隔离。
依赖共享。
状态通信。
版本兼容。
权限和鉴权。
性能与缓存。
发布回滚。

方案在原理层的关键差异（详细展开见 前端架构设计与微前端系统学习文档.md 第 10 章）：

方案	隔离机制	集成粒度	一句话判断
qiankun（基于 single-spa）	Proxy/快照 JS 沙箱 + 前缀或 Shadow DOM 样式隔离	应用级（HTML entry + 生命周期）	生态成熟、改造成本偏高
wujie（无界）	iframe 跑 JS + WebComponent/Shadow DOM 渲染 DOM	应用级，组件式接入	原生隔离、保活、子应用近乎零改造
micro-app	with + Proxy 沙箱 + 类 WebComponent 渲染	应用级（自定义标签）	接入成本最低
Module Federation	无沙箱（共享同一运行时）	模块/组件级	本质是运行时依赖共享，不是应用容器
iframe	浏览器同源进程级隔离	页面级	隔离最强、体验与通信代价最大

⚠️ 架构师最容易犯的错：把 Module Federation 当成"微前端全家桶"引入。它解决共享依赖和模块级远程加载，不解决生命周期、样式隔离和沙箱；应用级集成仍需 single-spa 系（qiankun/wujie/micro-app）或路由层方案配合。

8.4 设计系统

设计系统包括：

Design Tokens。
组件库。
图标库。
主题。
文档。
使用规范。
可访问性标准。
版本和变更策略。

组件库不是设计系统的全部。设计系统的目标是让产品体验在长期多人协作中保持一致。

8.5 技术债治理

技术债不等于“代码丑”。技术债是未来需要付利息的技术选择。

架构师要管理：

债务清单。
风险等级。
迁移计划。
偿还窗口。
废弃 API。
兼容层。
版本节奏。

9. 第六层：性能、安全、可访问性与稳定性

9.1 性能优化

必须掌握：

LCP。
INP。
CLS。
TTFB。
TBT。
RUM。
Lighthouse。
Chrome DevTools。
bundle 分析。
图片优化。
缓存策略。
JS 长任务治理。

性能文档建议单独学习：前端性能优化系统学习文档.md。

9.2 安全

必须掌握：

XSS。
CSRF。
CSP。
点击劫持。
依赖供应链安全。
token 存储。
OAuth / OIDC 基础。
CORS。
敏感信息泄漏。

前端安全不是后端的事。只要前端处理用户输入、token、第三方脚本和页面渲染，就有安全职责。

9.3 可访问性

必须掌握：

语义化 HTML。
键盘操作。
焦点管理。
表单 label。
ARIA。
颜色对比度。
屏幕阅读器基础。
WCAG。

可访问性不是“公益附加项”，它会影响真实用户、自动化测试、SEO 和产品专业度。

9.4 生产稳定性

必须掌握：

错误边界。
全局异常捕获。
资源加载失败降级。
灰度发布。
回滚。
降级开关。
第三方 SDK 故障隔离。
弱网和低端设备适配。

10. 第七层：测试、CI/CD 与发布体系

10.1 测试金字塔

常见测试类型：

单元测试。
组件测试。
集成测试。
E2E 测试。
视觉回归测试。
可访问性测试。
性能测试。
契约测试。

工具：

Vitest。
Jest。
Testing Library。
Playwright。
Cypress。
Storybook。
Chromatic。
MSW。

10.2 CI/CD

必须掌握：

GitHub Actions / GitLab CI / Jenkins。
install 缓存。
build 缓存。
lint。
typecheck。
test。
e2e。
bundle size。
部署。
回滚。
环境变量。
secret 管理。

10.3 发布策略

常见策略：

全量发布。
灰度发布。
蓝绿发布。
金丝雀发布。
Feature Flag。
A/B 测试。
快速回滚。

前端架构师要确保发布失败时有退路。

11. 第八层：可观测性与线上问题治理

11.1 可观测性三支柱

Logs：日志。
Metrics：指标。
Traces：链路追踪。

前端还要关注：

JS error。
Promise rejection。
资源加载错误。
Web Vitals。
用户行为路径。
API 成功率和耗时。
白屏。
卡顿。
崩溃。

11.2 常见工具

Sentry。
OpenTelemetry。
Datadog。
New Relic。
Grafana。
Prometheus。
自建埋点平台。

11.3 架构师关注点

可观测性不是“接一个 SDK”。

真正要设计：

指标口径。
采样率。
隐私合规。
release 关联。
source map 管理。
告警阈值。
问题归因。
与后端 trace 串联。
线上事故复盘。

12. 第九层：设计系统、组件库与体验一致性

12.1 组件库能力

必须掌握：

组件 API 设计。
受控与非受控。
组合模式。
主题。
样式隔离。
可访问性。
国际化。
测试。
文档。
版本兼容。

12.2 Storybook

Storybook 可用于：

组件开发。
组件文档。
交互测试。
视觉回归。
可访问性检查。
设计评审。

12.3 Design Tokens

Tokens 可表达：

颜色。
字体。
间距。
圆角。
阴影。
动效。
层级。

Tokens 的价值是把设计语言结构化，便于跨平台、跨主题、跨团队复用。

13. 第十层：团队规范、技术决策与架构治理

13.1 技术选型

技术选型不应只看流行度。应考虑：

业务需求。
团队能力。
社区活跃度。
生态完整度。
迁移成本。
性能。
安全。
长期维护。
招聘和培训成本。

13.2 ADR

ADR：Architecture Decision Record，架构决策记录。

建议记录：

背景。
备选方案。
决策。
原因。
风险。
后续影响。

ADR 能避免团队半年后忘记“为什么当初这样选”。

13.3 规范落地

规范要能自动化：

ESLint。
Prettier。
TypeScript。
commitlint。
CI。
模板脚手架。
代码生成。
文档站。
架构检查。

只写在文档里、不进入工具链的规范，长期很难坚持。

13.4 迁移策略

大型迁移要考虑：

双轨运行。
兼容层。
codemod。
自动化测试。
分批发布。
回滚方案。
里程碑。
风险清单。

典型迁移：

Vue 2 到 Vue 3。
Webpack 到 Vite。
Babel 7 到 Babel 8。
JS 到 TS。
多仓库到 Monorepo。
旧组件库到新设计系统。

14. 学习路线：由基础到高阶

14.1 基础阶段

目标：打稳 Web 和语言基础。

学习内容：

HTML 语义化、表单、资源加载。
CSS 布局、响应式、动画。
JavaScript 异步、事件循环、模块。
TypeScript 基础和 strict 模式。
浏览器渲染和 HTTP 缓存。

产出练习：

写一个响应式页面。
写一个 TypeScript 小组件库。
用 DevTools 分析页面加载。

14.2 进阶阶段

目标：能独立搭建中型项目。

学习内容：

React 或 Vue 深入。
路由和状态管理。
API 请求封装。
Vite / Webpack。
ESLint、Prettier、Babel。
单元测试和 E2E 测试。

产出练习：

搭建一个后台管理系统。
接入登录、权限、表格、表单。
配置 lint、test、build。

14.3 高级阶段

目标：能治理大型项目。

学习内容：

Monorepo。
组件库。
设计系统。
性能优化。
微前端。
CI/CD。
可观测性。

产出练习：

搭建 pnpm workspace。
发布内部组件库。
接入 Web Vitals 上报。
给项目定义性能预算。

14.4 架构师阶段

目标：能做技术路线和长期治理。

学习内容：

架构分层和模块边界。
技术选型和 ADR。
大型迁移。
发布治理。
安全与可访问性体系。
团队规范和自动化。

产出练习：

写一份前端架构设计文档。
写一份技术选型 ADR。
设计一次 Webpack 到 Vite 的迁移方案。
设计微前端拆分方案。
设计前端生产事故排查流程。

15. 面试与真实工作中的考察方式

15.1 常见面试题

如何设计一个大型后台管理系统前端架构？
什么时候需要微前端？
Monorepo 有什么收益和代价？
如何治理组件库版本？
如何设计前端性能监控？
LCP 慢怎么排查？
如何防止 XSS？
SSR 和 CSR 如何选择？
Babel、SWC、esbuild 有什么区别？
Vite 为什么快？
如何设计 CI/CD 质量门禁？
如何做前端灰度和回滚？

15.2 真实工作更看重什么

真实工作中，架构师能力通常体现在：

能不能把模糊问题拆清楚。
能不能把局部问题放进全局看。
能不能让方案落地，而不是只讲概念。
能不能兼顾短期交付和长期演进。
能不能推动团队执行规范。
能不能用数据证明优化有效。
能不能在事故中快速定位和复盘。

16. 文档阅读顺序建议

建议按照下面顺序学习本目录中的文档：

JavaScript系统学习文档.md
正则表达式系统学习文档.md
TypeScript系统学习文档.md
Vite系统学习文档.md
Webpack系统学习文档.md
ESLint系统学习文档.md
Babel系统学习文档.md
前端性能优化系统学习文档.md
前端架构师技术栈项目落地实战手册.md
用户权限动态路由与页面权限控制项目实战文档.md
浏览器原理HTTP_CDN缓存与BFF系统学习文档.md
AST与Webpack自定义Loader和Plugin系统学习文档.md
前端架构设计与微前端系统学习文档.md
前端工程化与构建发布系统学习文档.md
前端质量保障安全可访问性与可观测性系统学习文档.md
大文件上传系统设计与框架落地方案.md

如果你正在准备前端架构师面试，可以先读第 8 到第 16 份，再回头补基础短板。如果你更关注真实项目落地，优先读第 9、10、11、12、16 份。

17. 官方参考资料

MDN Web Docs：https://developer.mozilla.org/
web.dev Learn Performance：https://web.dev/learn/performance
Web Vitals：https://web.dev/articles/vitals
React 官方文档：https://react.dev/
Vue 官方文档：https://vuejs.org/
Next.js 官方文档：https://nextjs.org/docs
Vite 官方文档：https://vite.dev/guide/
Webpack 官方文档：https://webpack.js.org/concepts/
Babel 官方文档：https://babeljs.io/docs/
ESLint 官方文档：https://eslint.org/docs/latest/
TypeScript 官方文档：https://www.typescriptlang.org/docs/
Turborepo 官方文档：https://turborepo.com/docs
Nx 官方文档：https://nx.dev/docs
pnpm Workspaces：https://pnpm.io/workspaces
Playwright 官方文档：https://playwright.dev/docs/intro
Vitest 官方文档：https://vitest.dev/guide/
Testing Library 指导原则：https://testing-library.com/docs/guiding-principles
Storybook 官方文档：https://storybook.js.org/docs
OWASP Cheat Sheet Series：https://cheatsheetseries.owasp.org/
W3C WCAG：https://www.w3.org/WAI/standards-guidelines/wcag/
OpenTelemetry JavaScript：https://opentelemetry.io/docs/languages/js/
Module Federation：https://module-federation.io/
Webpack Module Federation 概念：https://webpack.js.org/concepts/module-federation/
qiankun：https://qiankun.umijs.org/ （3.x 开发中，2.x 文档：https://v2.qiankun.umijs.org/）
wujie（无界）：https://wujie-micro.github.io/doc/
micro-app（京东）：https://jd-opensource.github.io/micro-app/
single-spa：https://single-spa.js.org/docs/getting-started-overview/
PWA on MDN：https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

前端架构师技术栈全景学习文档 ​

目录 ​

1. 前端架构师的定位 ​

1.1 高级前端与前端架构师的区别 ​

2. 能力分层总览 ​

2.1 基础能力 ​

2.2 应用开发能力 ​

2.3 工程化能力 ​

2.4 架构与治理能力 ​

2.5 生产稳定性能力 ​

3. 必须掌握的技术栈矩阵 ​

3.1 总体矩阵 ​

3.2 不同业务类型的侧重点 ​

4. 第一层：Web 基础与浏览器能力 ​

4.1 HTML ​

4.2 CSS ​

4.3 JavaScript ​

4.4 浏览器原理 ​

5. 第二层：语言与类型系统 ​

5.1 TypeScript 是架构能力 ​

5.2 类型边界 ​

5.3 类型系统常见误区 ​

6. 第三层：框架、渲染与状态管理 ​

6.1 框架选择 ​

6.2 渲染模式 ​

6.3 状态管理 ​

6.4 数据请求与 API 契约 ​

7. 第四层：工程化与构建体系 ​

7.1 构建工具 ​

7.2 编译与转译 ​

7.3 代码规范与静态检查 ​

7.4 包管理 ​

7.5 Monorepo ​

8. 第五层：架构设计与大型应用治理 ​

8.1 应用分层 ​

8.2 模块边界 ​

8.3 微前端 ​

8.4 设计系统 ​

8.5 技术债治理 ​

9. 第六层：性能、安全、可访问性与稳定性 ​

9.1 性能优化 ​

9.2 安全 ​

9.3 可访问性 ​

9.4 生产稳定性 ​

10. 第七层：测试、CI/CD 与发布体系 ​

10.1 测试金字塔 ​

10.2 CI/CD ​

10.3 发布策略 ​

11. 第八层：可观测性与线上问题治理 ​

11.1 可观测性三支柱 ​

11.2 常见工具 ​

11.3 架构师关注点 ​

12. 第九层：设计系统、组件库与体验一致性 ​

12.1 组件库能力 ​

12.2 Storybook ​

12.3 Design Tokens ​

13. 第十层：团队规范、技术决策与架构治理 ​

13.1 技术选型 ​

13.2 ADR ​

13.3 规范落地 ​

13.4 迁移策略 ​

14. 学习路线：由基础到高阶 ​

14.1 基础阶段 ​

14.2 进阶阶段 ​

14.3 高级阶段 ​

14.4 架构师阶段 ​

15. 面试与真实工作中的考察方式 ​

15.1 常见面试题 ​

15.2 真实工作更看重什么 ​

16. 文档阅读顺序建议 ​

17. 官方参考资料 ​

前端架构师技术栈全景学习文档

目录

1. 前端架构师的定位

1.1 高级前端与前端架构师的区别

2. 能力分层总览

2.1 基础能力

2.2 应用开发能力

2.3 工程化能力

2.4 架构与治理能力

2.5 生产稳定性能力

3. 必须掌握的技术栈矩阵

3.1 总体矩阵

3.2 不同业务类型的侧重点

4. 第一层：Web 基础与浏览器能力

4.1 HTML

4.2 CSS

4.3 JavaScript

4.4 浏览器原理

5. 第二层：语言与类型系统

5.1 TypeScript 是架构能力

5.2 类型边界

5.3 类型系统常见误区

6. 第三层：框架、渲染与状态管理

6.1 框架选择

6.2 渲染模式

6.3 状态管理

6.4 数据请求与 API 契约

7. 第四层：工程化与构建体系

7.1 构建工具

7.2 编译与转译

7.3 代码规范与静态检查

7.4 包管理

7.5 Monorepo

8. 第五层：架构设计与大型应用治理

8.1 应用分层

8.2 模块边界

8.3 微前端

8.4 设计系统

8.5 技术债治理

9. 第六层：性能、安全、可访问性与稳定性

9.1 性能优化

9.2 安全

9.3 可访问性

9.4 生产稳定性

10. 第七层：测试、CI/CD 与发布体系

10.1 测试金字塔

10.2 CI/CD

10.3 发布策略

11. 第八层：可观测性与线上问题治理

11.1 可观测性三支柱

11.2 常见工具

11.3 架构师关注点

12. 第九层：设计系统、组件库与体验一致性

12.1 组件库能力

12.2 Storybook

12.3 Design Tokens

13. 第十层：团队规范、技术决策与架构治理

13.1 技术选型

13.2 ADR

13.3 规范落地

13.4 迁移策略

14. 学习路线：由基础到高阶

14.1 基础阶段

14.2 进阶阶段

14.3 高级阶段

14.4 架构师阶段

15. 面试与真实工作中的考察方式

15.1 常见面试题

15.2 真实工作更看重什么

16. 文档阅读顺序建议

17. 官方参考资料