前端架构师知识库

Appearance

前端架构师通关项目实战手册 ​

把每个阶段的目标转化为可执行的实战项目，从初级到架构师，一步步完成蜕变。

项目总览 ​

阶段项目目标预计投入
阶段一搭建组件库 + 文档站点掌握工程化基础2-4 周
阶段一实现一个完整的前端应用掌握框架和状态管理2-4 周
阶段二搭建 Monorepo + CI/CD掌握团队协作工程化3-4 周
阶段二性能优化实战掌握性能度量与优化2-3 周
阶段二设计并实现 BFF 服务掌握服务端能力3-4 周
阶段三主导一次技术选型掌握架构决策能力2-3 周
阶段三设计微前端基座掌握复杂系统架构4-6 周
阶段三建立可观测性体系掌握稳定性工程3-4 周
阶段四制定技术演进路线图掌握技术战略持续

项目一：搭建组件库 + 文档站点 ​

目标 ​

  • 掌握 TypeScript、组件设计、工程化配置。
  • 产出可复用的组件库和文档站点。

技术栈 ​

  • React + TypeScript
  • Rollup / Vite 构建
  • Storybook 文档
  • Vitest 测试
  • pnpm 包管理

Step-by-Step ​

  1. 初始化项目

    bash
    mkdir my-ui && cd my-ui
pnpm init
pnpm add react react-dom typescript @types/react -D

  2. 配置 TypeScript

    • 创建 tsconfig.json。
    • 配置严格的类型检查。

  3. 实现 5-10 个基础组件

    • Button、Input、Modal、Table、FormItem。
    • 每个组件包含：组件代码、类型定义、样式、测试、文档。

  4. 配置 Rollup/Vite 构建

    • 输出 ES Module 和 CommonJS。
    • 配置 TypeScript 声明文件生成。

  5. 接入 Storybook

    • 为每个组件编写 Stories。

  6. 编写测试

    • 每个组件至少 3 个测试用例。

  7. 发布到 npm（可选）

    • 配置 package.json、.npmignore。

验收标准 ​

  • [ ] 至少 5 个组件可用。
  • [ ] 测试覆盖率 > 80%。
  • [ ] Storybook 可正常启动并展示组件。
  • [ ] TypeScript 类型完整。

项目二：实现一个完整的前端应用 ​

目标 ​

  • 掌握框架、状态管理、路由、接口调用。
  • 理解真实业务项目的开发流程。

技术栈 ​

  • React + TypeScript
  • React Router
  • TanStack Query
  • Zustand
  • React Hook Form

Step-by-Step ​

  1. 需求分析

    • 选择一个简单业务：如 Todo、博客、电商商品管理。

  2. 设计数据模型

    • 用户、文章/商品、分类等。

  3. 搭建项目结构

    src/
├── components/    # 通用组件
├── pages/         # 页面
├── hooks/         # 自定义 Hooks
├── services/      # API 封装
├── stores/        # 状态管理
└── utils/         # 工具函数

  4. 实现核心功能

    • 列表页（分页、筛选、排序）。
    • 详情页。
    • 表单页（新增/编辑）。

  5. 状态管理

    • 服务端状态用 TanStack Query。
    • 全局客户端状态用 Zustand。

  6. 错误处理和加载状态

    • 统一的错误提示和 Loading。

验收标准 ​

  • [ ] 功能完整可用。
  • [ ] 代码结构清晰。
  • [ ] 状态管理合理。
  • [ ] 有基础的错误处理。

项目三：搭建 Monorepo + CI/CD ​

目标 ​

  • 掌握多包管理、构建缓存、自动化流水线。

技术栈 ​

  • pnpm workspace
  • Turborepo
  • GitHub Actions
  • Changesets（版本管理）

Step-by-Step ​

  1. 初始化 Monorepo

    bash
    mkdir my-monorepo && cd my-monorepo
pnpm init
mkdir packages apps

  2. 创建共享包

    • packages/ui：组件库
    • packages/utils：工具函数
    • packages/types：共享类型

  3. 创建应用

    • apps/web：前端应用
    • apps/docs：文档站点

  4. 配置 Turborepo

    • 定义 build、test、lint 任务。
    • 配置缓存策略。

  5. 接入 GitHub Actions

    • PR 时运行 lint、test、build。
    • 合并到 main 后自动发布。

  6. 接入 Changesets

    • 管理版本号和 changelog。

验收标准 ​

  • [ ] 多个包可以独立构建和发布。
  • [ ] CI 流水线正常运行。
  • [ ] 修改一个包只触发相关包的构建。

项目四：性能优化实战 ​

目标 ​

  • 掌握性能指标、定位方法、优化手段。

Step-by-Step ​

  1. 选择目标页面

    • 项目二中的应用或一个现有页面。

  2. 基线测量

    • 用 Lighthouse 跑 3 次取平均。
    • 记录 LCP、INP、CLS、FCP。

  3. 瓶颈定位

    • Network 面板分析资源大小和请求数量。
    • Performance 面板分析长任务和渲染阻塞。

  4. 实施优化

    • 图片格式转换（WebP/AVIF）。
    • 代码分割和懒加载。
    • 关键 CSS 内联。
    • 减少重渲染。

  5. 验证效果

    • 再次跑 Lighthouse。
    • 对比优化前后指标。

验收标准 ​

  • [ ] Lighthouse 分数提升 > 15 分。
  • [ ] 至少实施 3 项有效优化。
  • [ ] 输出性能优化报告。

项目五：设计并实现 BFF 服务 ​

目标 ​

  • 掌握 Node.js、BFF 架构、接口聚合、错误处理。

技术栈 ​

  • Node.js + Express / Fastify
  • TypeScript
  • Redis（缓存）

Step-by-Step ​

  1. 需求分析

    • 假设有用户服务、订单服务、商品服务。
    • H5 端需要一个聚合接口：用户摘要 + 最近订单 + 推荐商品。

  2. 搭建 BFF 服务

    bash
    mkdir my-bff && cd my-bff
pnpm init
pnpm add express typescript @types/express -D

  3. 实现接口聚合

    • /api/home-summary 调用 3 个下游服务。
    • 使用 Promise.all 并行请求。

  4. 数据适配

    • 把下游数据转成前端需要的格式。

  5. 添加缓存

    • 热点数据缓存到 Redis。

  6. 错误处理

    • 下游服务失败时返回降级数据。

  7. 部署

    • Docker 容器化。

验收标准 ​

  • [ ] 聚合接口响应时间 < 500ms（含下游调用）。
  • [ ] 有基本的错误降级。
  • [ ] 有缓存策略。

项目六：主导一次技术选型 ​

目标 ​

  • 掌握技术选型的决策框架和 ADR 输出。

Step-by-Step ​

  1. 明确问题

    • 例如：前端框架选型、状态管理选型、构建工具选型。

  2. 收集候选方案

    • 列出 2-3 个可行方案。

  3. 建立评估标准

    • 业务契合度、技术成熟度、团队能力、性能、成本等。

  4. 做 POC 验证

    • 每个方案实现一个原型。

  5. 组织评审会

    • 邀请相关同学讨论。

  6. 输出 ADR

    • 使用 templates/ADR-TEMPLATE.md。

验收标准 ​

  • [ ] 输出完整的 ADR。
  • [ ] 有评分卡和 POC 结果。
  • [ ] 获得团队共识。

项目七：设计微前端基座 ​

目标 ​

  • 掌握微前端架构、路由、通信、部署。

技术栈 ​

  • qiankun / Module Federation
  • React

Step-by-Step ​

  1. 设计架构

    • 基座应用负责菜单、路由、权限。
    • 子应用负责具体业务。

  2. 实现基座

    • 动态加载子应用。
    • 统一导航和布局。

  3. 实现 2 个子应用

    • 例如：订单管理、用户管理。

  4. 通信方案

    • 全局状态共享。
    • 事件通信。

  5. 独立部署

    • 每个子应用独立构建部署。

验收标准 ​

  • [ ] 基座能正确加载子应用。
  • [ ] 子应用之间能通信。
  • [ ] 路由切换正常。

项目八：建立可观测性体系 ​

目标 ​

  • 掌握错误监控、性能监控、埋点、告警。

Step-by-Step ​

  1. 接入 Sentry

    • 配置错误监控。
    • 上传 Source Map。

  2. 采集 Core Web Vitals

    • 使用 web-vitals 库。

  3. 设计埋点方案

    • 页面浏览、按钮点击、核心转化事件。

  4. 搭建数据看板

    • 用 Grafana 或自建 Dashboard 展示指标。

  5. 配置告警

    • 错误率、性能指标超过阈值时通知。

验收标准 ​

  • [ ] 线上错误能被采集和定位。
  • [ ] 性能指标可监控。
  • [ ] 核心业务流程有埋点。

项目九：制定技术演进路线图 ​

目标 ​

  • 掌握技术战略思维和长期规划能力。

Step-by-Step ​

  1. 现状评估

    • 梳理当前技术栈、架构、技术债、团队能力。

  2. 业务对齐

    • 理解未来 1-3 年业务战略。

  3. 识别关键能力

    • 根据业务目标确定需要建设的技术能力。

  4. 定义阶段目标

    • 拆分为季度目标。

  5. 输出路线图

    • 使用 templates/ 中的工具。

  6. 沟通落地

    • 与团队和业务方对齐。

验收标准 ​

  • [ ] 输出 1-3 年技术演进路线图。
  • [ ] 获得管理层认可。
  • [ ] 能拆解为可执行的任务。

如何选择项目？ ​

当前阶段推荐项目
初级前端项目一、项目二
高级前端项目三、项目四、项目五
前端专家项目六、项目七、项目八
前端架构师项目九，同时持续优化前八个项目

最后更新：2026-06-18

基于 MIT 协议发布

Copyright © 2026 前端架构师知识库