高级前端工程师 / 前端负责人 · 北京 · 8 年经验
guxingzhou@example.com · 186 0000 0000 · github.com/guxingzhou
个人优势
- 八年前端经验，近四年带 12 人团队，负责云控制台前端（40 多个云产品），主导过微前端拆分、设计系统和质量体系三项基础建设
- 架构上能从团队协作反推技术方案：把巨石控制台拆成微前端，发布从每周一次的全员协调变成各产品按需独立发布
- 熟悉 qiankun 和 Module Federation 的原理与取舍，处理过沙箱样式泄漏、共享依赖版本冲突、子应用预加载等实际问题
- 推动过跨职能的设计系统：设计规范、Design Token、组件库、Figma 组件四件套，覆盖 6 条产品线
- 建立前端质量门禁（单测覆盖率、体积预算、Lighthouse、接口契约检查）和值班机制，线上故障数同比下降约 60%
- 移动端有深度经验：设计过 Hybrid 离线包方案，命中率 96%，司机端页面秒开率从六成多提到九成以上
- 熟悉编译工具链，写过 Babel 插件和 ESLint 规则，用 codemod 批量完成过 2000 多个文件的组件库大版本升级
- 能写服务端：用 NestJS 做过 BFF 和研发效能平台，熟悉 Docker 和 Kubernetes 上的部署与灰度
- 带人有方法：建立技术方案评审、Code Review 和季度分享机制，两年内 4 人晋升，核心成员没有流失
- 保持一线编码，每个季度至少负责一个关键模块的实现，技术判断不脱离代码
- 技术栈：React 18、Vue 3、Next.js、TypeScript、qiankun / Module Federation、Webpack、Vite、Playwright、Node.js（NestJS）、Docker / Kubernetes
工作经历
某云服务公司 · 前端技术负责人
负责云控制台前端，控制台承载计算、存储、网络等 40 多个云产品，由各产品团队共同开发。
- 微前端架构：控制台原来是一个巨石应用，任何一个产品发版都要全量构建，一次发布要协调所有团队，构建一次 20 多分钟。主导拆分为微前端，各产品独立开发、独立发布，发布频率从每周一次变为按需随时发布
- 设计系统：推动设计和前端共建设计系统（设计规范、Design Token、组件库、Figma 组件），覆盖 6 条产品线；组件库作为唯一的 UI 基础，表单、表格等交互在各产品间保持一致
- 质量保障：建立前端质量门禁（单测覆盖率、包体积预算、Lighthouse 分数、接口契约检查），接入线上监控和值班机制，控制台前端线上故障数同比下降约 60%
- 团队管理：管理 12 人团队，负责招聘、技术规划和绩效。建立技术方案评审、Code Review 和季度技术分享机制；两年内团队有 4 人晋升，核心成员没有流失
某出行平台 · 资深前端工程师
司机端前端组，负责司机 App 内的 H5 页面和运营后台，组内 9 人。
- Hybrid 性能优化：司机端大量页面是 App 内嵌 H5，弱网下打开很慢。设计离线包方案，页面秒开率从约 六成提升到九成以上（详见项目经历）
- 前端 BFF：司机端一个页面要调五六个后端接口，字段多且冗余。设计 Node.js BFF 层统一做鉴权、接口聚合和字段裁剪，前端调用的接口数减少约三分之一，首屏接口耗时明显下降
- 负责司机端前端技术栈从 jQuery 迁移到 React，制定迁移规范和公共组件，新老页面并行运行半年后完成切换
项目经历
云控制台微前端架构
qiankun / Module Federation / React / TypeScript
- 主子应用职责划分：主应用负责登录态、顶部导航、菜单、权限和公共布局，子应用通过约定的生命周期接入，只关心自己的业务页面
- 应用间通信：全局状态只向子应用暴露只读快照和事件通道，子应用之间不允许直接引用，避免出现隐式耦合导致无法独立发布
- 依赖共享：React、组件库等公共依赖通过 Module Federation 共享，子应用平均产物体积减少 四成多；共享依赖的版本由主应用统一管理，升级时有兼容性检查
- 加载体验：按菜单点击热度预加载子应用资源，子应用加载失败时展示降级页并上报；子应用切换耗时从 1 秒多降到 300ms 左右
设计系统与组件库
React / Design Token / Storybook / Figma / Playwright
6 条产品线原来各有一套组件，同样是表格，筛选和分页的交互各不相同，客户在产品间切换要重新适应。
- 和设计团队一起定义 Design Token（颜色、间距、圆角、字号），Figma 和代码共用一份 Token 源文件，改一次两边同步
- 组件库 80 多个组件，每个组件配 Storybook 文档和 Playwright 截图回归，视觉改动在 PR 里就能看到对比
- 制定组件的废弃和迁移流程：新版本发布时附 codemod，旧 API 保留两个大版本并在控制台打印迁移提示
- 一年内 6 条产品线全部切到新组件库，设计验收中「交互不一致」类问题减少了大半
司机端 Hybrid 离线包
React / Node.js / CDN / JSBridge
- H5 资源打包后随 App 启动预下载，WebView 请求时优先命中本地资源，未命中再回源
- 支持增量更新（按文件哈希差分）和版本回退，出问题时服务端下发回退指令，不需要发 App 版本
- 离线包命中率 96%，页面秒开率从约六成提升到九成以上，弱网下页面打开失败的投诉明显减少
前端研发效能平台
Node.js / NestJS / GitLab CI / Docker
- 统一脚手架、代码规范、发布流水线和质量门禁，新项目从创建到第一次上线只要 半天
- 提供构建产物分析和依赖升级看板，按团队展示包体积变化和过期依赖，推动各团队定期治理
- 用 Babel 插件写了一批 codemod，批量完成组件库大版本升级中的 API 迁移，改动 2000 多个文件