前端架构 · 生产体系
前端基础设施 不是工具的堆叠， 而是一套生产体系。
它的本质，是建设一套让前端团队能够 更快、更稳、更低成本 交付业务的前端生产体系 —— 解决的不是某一个项目的问题，而是多团队、长期协作中反复出现的问题。
核心认知：它到底要解决什么？
前端基础设施不是单纯的脚手架、构建脚本、组件库，也不是为了追求技术先进而堆工具。 它要解决的，是这些反复出现、反复消耗团队的真实问题：
所以目标可以总结为六个关键词：
标准化、自动化、复用化、可观测、可治理、可持续演进。
整体架构：5 层模型
建议把公司的前端基础设施分成 5 层，覆盖从开发前、开发中、发布时、上线后到长期治理的完整链路。 点击每一层，展开它的目标、建设内容与判断标准。
目标
高频业务能力不要重复开发，而要沉淀为可复用资产。
建设内容
判断标准
- 重复开发是否减少
- 组件复用率是否提升
- 新页面开发时间是否缩短
- 业务团队是否主动使用组件库
目标
前端上线之后，问题如何发现、定位、告警、止损和复盘。
建设内容
判断标准
- 问题发现是否从「用户反馈」变成「自动告警」
- 错误是否可定位到源码
- 是否知道哪个版本引入问题、影响多少用户
- 故障是否有复盘和改进动作
目标
业务变化越快，越需要质量保障，否则项目会快速腐化。
建设内容
判断标准
- 低级格式问题是否减少
- 构建失败是否提前暴露
- 线上低级事故是否减少
- Code Review 是否更聚焦业务逻辑
目标
覆盖从本地开发到生产发布的完整交付链路，不依赖某个人手工操作。
建设内容
判断标准
- 发布耗时 / 失败率是否下降
- 是否能快速回滚
- 是否知道每次发布包含哪些 commit
- 是否能自动上传 SourceMap
目标
脚手架不应只是「生成项目模板」，而应成为公司前端标准能力的入口。
建设内容
判断标准
- 新项目初始化是否从 1 天缩短到 10 分钟
- 新人是否可以快速跑起项目
- 不同项目目录结构是否统一
- 基础能力是否不再重复接入
开发前 → 开发中 → 发布时 → 上线后 → 长期治理
标准发布流程
不要让发布依赖某个人手工操作。理想的目标流程，是从开发提交到监控观察的全自动闭环 —— 可追溯、可关联、可告警、可回滚。滚动查看每个环节。
- 开发提交代码
- 本地 Git hooks 检查
- 提交到远程分支
- CI 自动安装依赖
- lint / type check / test
- 执行 build
- 产物分析
- 上传静态资源
- 上传 SourceMap
- 部署测试环境
- 预发验证
- 灰度发布
- 生产发布
- 监控观察
- 异常回滚
分阶段质量门禁
质量体系不要一开始就过重。先落地最小质量闭环，等团队接受后再逐步加码。 质量门禁分三道关卡：
本地提交前
在你按下 commit 的瞬间拦住问题
- format
- lint
- type check
- commit message check
合并代码前
CI 在合并前守住主干质量
- install
- lint
- type check
- unit test
- build
- bundle size check
发布前
上线前的最后一次体检
- 构建产物检查
- 环境变量检查
- SourceMap 检查
- 版本号检查
- 灰度环境验证
支撑体系：Monorepo 与微前端
当项目、组件、SDK 越来越多时，需要统一包管理；但微前端不是必选项，而是特定阶段的架构方案。 不要为了先进而上。
📦Monorepo 推荐结构
apps/
admin-system
mobile-h5
docs
packages/
ui · business-components
hooks · utils · request
auth · tracking-sdk
monitor-sdk · eslint-config
tsconfig · build-scripts · cli从 pnpm workspace + Changesets 开始，复杂度可控，不必一开始全上 Turborepo / Nx / Rush。
🧭架构演进优先级
不要跳过前面的基础治理，直接上微前端。团队小、项目少、只想显得高级时，统一技术栈即可解决问题。
落地路线：分 3 阶段推进
不要一上来就做大而全的平台。基础设施建设一定要围绕业务痛点， 先标准化、再自动化、再复用、再治理。
统一工程底座
先解决混乱问题，让项目有统一标准。
重点工作
- 盘点项目 / 技术栈 / 发布流程 / 线上事故
- 制定工程规范 v1
- 升级脚手架、统一项目模板
- 统一 ESLint / Prettier / TS / commit
- 统一基础 CI
交付物
- 现状调研报告
- 工程规范 v1
- 标准项目模板 v1
- 脚手架 v1 · CI 模板 v1
- 统一代码规范配置包
提效与质量建设
减少重复开发，提升交付质量。
重点工作
- 建设基础 / 业务组件库
- 封装请求库、权限、埋点方案
- 建立组件文档站、页面模板
- 完善 CI 质量门禁
- 建设内部 npm 包管理
交付物
- 基础 / 业务组件库 v1
- 请求库 v1
- 权限 / 埋点接入方案
- 组件文档站 · 页面模板库
- CI 质量门禁 v1
稳定性与治理建设
让上线更稳定，问题可观测、可追踪、可治理。
重点工作
- 接入异常 / 性能监控
- SourceMap 自动上传、版本关联
- 建立错误 / 性能看板
- 灰度发布与回滚机制
- 故障复盘、项目健康度评分
交付物
- 前端监控体系
- SourceMap 管理流程
- 发布记录平台
- 错误 / 性能看板
- 项目健康度看板
优先级：先做什么，后做什么
切换标签，查看 P0 / P1 / P2 三档优先级的具体内容与判断依据。
这是地基。不统一这些，后面所有治理都会很困难。
这些对业务效率和线上稳定性提升最明显。
适合在项目数量和团队规模起来后推进。
衡量指标
基础设施的价值要可量化。用这些指标，把「感觉变好了」变成「数据证明变好了」。
黄金路径：一条默认正确的路线
目标不是限制大家，而是让大多数场景有一条默认正确的路线，把精力放在真正的业务逻辑和用户体验上。
前端基础设施，是一套覆盖研发入口、工程构建、质量保障、运行治理与业务赋能的前端生产体系。
它不是为了炫技，而是为了：
