前端工程化
用系统化的、可度量的方法，覆盖前端应用的开发 → 测试 → 部署 → 上线全过程。目标只有一个：降本增效，提高应用质量
工程化不是堆工具，而是把"经验"沉淀成"流程"——让团队少踩坑、让新人快速上手、让线上问题可发现可定位，工程化工作需要以结果为导向，切忌自嗨。
避坑指南（先看这一节）
90% 的工程化项目死在这几个坑里，建议在动手前过一遍。
- 别为了工程化而工程化。3 人小项目强上 monorepo + 微前端 + 自研脚手架 = 维护灾难。
- 规范不能光写不跑。ESLint/Prettier/Commitlint 必须配
lint-staged+ CI 卡点，否则三天就废。 - 监控不能等到出事才接。Sentry/性能上报 上线第一天就要有，别等用户来报 bug。
- 环境变量不能进 git。
.env.local加进.gitignore，敏感信息走平台的secrets。 - 回滚预案先于发布。发版前必须验证「一键回滚」真的能跑，别等出事手忙脚乱。
- 日志要带
requestId。没有 traceId 的日志就是天书，定位问题时能抓狂。 - 告警要分级。P0 电话、P1 钉钉、P2 看板，全堆钉钉 = 告警麻木 = 真出事了没人看。
- 锁文件必须冻结。CI 用
pnpm install --frozen-lockfile，否则每天构建出的版本都不一样。 - 第三方包要看 bundle size。一个 200KB 的 lodash 直接拖垮首屏。
- blameless 复盘。出事故找系统问题，不找人背锅——否则下次没人敢报警。
关注点全景
| 阶段 | 核心议题 | 关键产出 |
|---|---|---|
| 技术选型 | 框架/构建工具/包管理选型 | 选型 Checklist、技术调研报告 |
| 开发 | 项目初始化、规范、请求层、权限、Mock | 脚手架、模板、规范文档 |
| 测试 | 单元测试、E2E、AI 辅助测试 | 测试覆盖率、Playwright 用例 |
| 部署 | Docker、PM2、K8s、CI/CD | 镜像、Deployment YAML、流水线 |
| 上线 | 监控、日志、告警、埋点、应急 | Sentry 上报、Runbook、On-call |
四大模块导航
🛠️ 技术选型
先选型，再动手。避免上来就 React + Vite + Antd 一把梭。
💻 开发
日常打交道最多的环节，决定团队协作效率。
- 新建项目（Vite/Next.js/webpack5）
- 包管理（pnpm + Monorepo + 版本管理 + 发布）
- 脚手架
- 项目规范（编码规范 + AI 协同）
- 请求函数封装 · Mock 数据 · 权限管理
- 样式文件管理 · 性能优化
- Git Workflow
🧪 测试
测试不是 QA 的事，是开发的事。
🚀 部署
部署的核心是确定性：同样的代码在任何环境都产出同样的结果。
📊 上线
上线只是开始，维护才是真正的考验。
选型决策树（速查）
| 场景 | 推荐方案 |
|---|---|
| 个人/小项目（< 5 人） | Vite + React + pnpm + Vercel |
| 中型业务项目（5~20 人） | Vite/Next.js + 团队规范 + Sentry + PM2 |
| 大型 ToB 平台（20 人+） | Monorepo（Turborepo）+ 微前端 + K8s + 自研脚手架 |
| 类库/SDK 开发 | Rollup + Changesets + npm publish |
| SSR/SEO 强需求 | Next.js（React）/ Nuxt（Vue） |
| 跨端复用 | Taro（小程序）/ React Native（移动端） |
面试高频考点
面试官最爱追问的 8 个问题，建议熟读各模块文档后自测。
- monorepo 的优势是什么？pnpm workspace 和 Turborepo 怎么选？ → 见 Monorepo 实战
- SemVer 规范中
^和~的区别？^0.1.0为什么锁住 minor？ → 见 版本管理 - Vite 为什么比 webpack 快？ESM 预构建的原理？ → 见 新建 Vite+React 项目
- Docker 多阶段构建为什么能瘦身？基础镜像怎么选？ → 见 Docker
- PM2 集群模式如何做到零停机重载？ → 见 PM2
- K8s Deployment 的滚动更新策略？HPA 怎么配？ → 见 K8s
- 前端监控怎么做？性能数据如何采集？ → 见 异常监控 · 性能监控
- 线上事故的应急流程？blameless 复盘怎么开展？ → 见 应急响应
💡 答面试题时建议用「场景 → 方案 → 权衡 → 落地数据」四段式，例如：「在 XX 项目上，我用 pnpm workspace 解决了多包联调问题，CI 提速 40%，但放弃了 yarn 的 PnP 因为…」