个人优势

• 三年前端开发经验，主要做 B 端 SaaS，负责过看板、报表、权限和审批几个完整模块，能从需求评审跟到上线复盘
• 熟悉 Vue 3 响应式和编译期优化，参与并主导了 600 多个组件从 Vue 2 迁到 Vue 3，迁移期间业务正常发版
• TypeScript 用得比较深，给团队组件库写过泛型表格、泛型表单组件，类型提示能精确到列字段
• 做过大数据量图表的性能优化：把聚合计算挪到 Web Worker，维度切换不再卡顿
• 有表单引擎的实际经验，基于 JSON Schema 做过联动、校验和可视化配置，目前承载公司 60 多个审批表单
• 重视组件沉淀，封装的表格、筛选栏、弹窗表单配了 Storybook 文档，新做一个标准列表页从两三天缩到一天以内
• 能独立写 Node.js 小服务，用 Koa 写过 BFF 接口和文件上传服务，熟悉分片上传和断点续传
• 有线上问题的排查习惯：接入 Sentry 后按接口报错、白屏、JS 异常分类告警，大部分问题当天就能发现
• 做过 uni-app 小程序，熟悉分包、图片压缩和弱网下的离线提交
• 关注可用性细节，组件默认支持键盘操作和错误状态，低配笔记本上也会自测一遍
• 技术栈：Vue 3、Pinia、Element Plus、TypeScript、Sass、Vite、Webpack、Vitest、Storybook、ECharts、uni-app、Sentry

工作经历

公司做企业级数据分析 SaaS，400 多家企业客户在用。我在 5 人前端组，负责看板、报表和权限三个模块。

• Vue 2 迁移 Vue 3：项目 600 多个组件，不能停下业务需求整体重写。先接入 @vue/compat 让项目在 Vue 3 下跑起来，再按模块逐个消除兼容层警告，Vuex 逐步换成 Pinia；两个月迁完，期间正常发版。构建换成 Vite 后本地冷启动从 40 多秒降到 5 秒，热更新基本即时
• 业务组件沉淀：把表格（列配置、分页、批量操作）、筛选栏、弹窗表单等反复写的模式封装成组件，配 Storybook 文档和示例；新做一个标准列表页从两三天缩短到 一天以内
• 错误监控：接入 Sentry，按接口报错、白屏、JS 异常三类配置企业微信告警，并把用户 ID 和租户写进上下文；之前靠客户反馈才知道的问题，现在基本当天就能发现
• 权限改造：原来按钮级权限散落在各个页面的 v-if 里，抽成 v-permission 指令和路由守卫统一处理，权限配置改为后端下发，新增角色不再需要发版

公司给连锁门店提供收银和巡店系统，我在 3 人前端组，负责门店后台和巡店小程序。

• 用 Vue 3 + Element Plus 开发门店后台的商品、库存和报表页面，独立负责了 20 多个页面的交付
• 报表导出原来是前端一次拉全量数据再拼 Excel，数据超过 5 万行浏览器直接卡死。和后端改成异步导出任务 + 下载链接，前端只负责发起和轮询进度
• 用 uni-app 开发巡店小程序（门店检查表、拍照上传、整改跟踪），门店地下室信号差，检查结果先存本地，联网后自动补交

项目经历

Vue 3 / TypeScript / ECharts / Pinia / Web Worker

客户在页面上自由组合图表、筛选维度来搭建自己的分析看板，一个看板通常有 10 到 20 个图表，单个图表的原始数据可能上万行。

• 主线程卡顿：维度切换时前端要对原始数据重新聚合（分组、求和、同比），放在主线程里一次要算 1 秒多，页面会卡住。把聚合计算移到 Web Worker，用 Transferable 传 ArrayBuffer 避免拷贝，主线程只负责渲染，切换维度时页面不再卡顿
• 图表配置化：设计看板的 JSON 配置（数据源、指标、维度、图表类型、样式），运营在界面上配置后保存，渲染端按配置生成 ECharts option；常规的看板需求不再需要前端排期
• 自适应：大屏模式和嵌入第三方页面时容器尺寸会变，统一用 ResizeObserver 监听容器并节流调用 resize，修复了全屏切换后图表尺寸错乱的问题
• 按需加载：20 个图表同时请求会把接口打满，改为视口内的图表先加载，其余进入视口时再请求，首屏接口数从 20 个降到 6 个左右

Vue 3 / JSON Schema / Monaco Editor / AJV

公司内部 OA 的审批表单原来每个都手写页面，引擎上线后用配置生成，目前承载 60 多个审批表单。

• 基于 JSON Schema 扩展表单协议，加入 x-component、x-reactions 字段描述组件类型和联动规则，联动按依赖图计算，避免循环触发
• 提供拖拽配置和源码编辑两种模式，源码模式用 Monaco Editor，接入 Schema 校验和字段名自动补全
• 校验规则前后端共用一份 Schema（前端 AJV、后端同样的 Schema 校验），避免前后端校验不一致
• 表单字段超过 100 个时输入明显卡顿，排查发现每次输入都触发整张表单的联动计算。改成只重算依赖当前字段的节点，输入恢复流畅

uni-app / Vue 3 / IndexedDB 兼容层

覆盖 300 多家门店的店长和督导，每天提交检查表 2000 份左右。

• 离线提交：检查结果和照片先写本地队列，联网后按顺序补交，重复提交用检查单 ID 做幂等；上线后「提交失败」相关的反馈基本消失
• 图片处理：一份检查表最多 30 张照片，拍照后本地压缩并加水印（门店、时间、定位），单张从 4MB 左右降到 300KB，上传耗时缩短到原来的五分之一左右
• 分包：报表和历史记录页移出主包，主包控制在 1.2MB 以内，首次打开时间明显缩短

教育经历

个人优势

• 八年前端经验，近四年带 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 条产品线全部切到新组件库，设计验收中「交互不一致」类问题减少了大半

React / Node.js / CDN / JSBridge

• H5 资源打包后随 App 启动预下载，WebView 请求时优先命中本地资源，未命中再回源
• 支持增量更新（按文件哈希差分）和版本回退，出问题时服务端下发回退指令，不需要发 App 版本
• 离线包命中率 96%，页面秒开率从约六成提升到九成以上，弱网下页面打开失败的投诉明显减少

Node.js / NestJS / GitLab CI / Docker

• 统一脚手架、代码规范、发布流水线和质量门禁，新项目从创建到第一次上线只要 半天
• 提供构建产物分析和依赖升级看板，按团队展示包体积变化和过期依赖，推动各团队定期治理
• 用 Babel 插件写了一批 codemod，批量完成组件库大版本升级中的 API 迁移，改动 2000 多个文件

教育经历

工作经历

负责云控制台前端，控制台承载计算、存储、网络等 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 条产品线全部切到新组件库，设计验收中「交互不一致」类问题减少了大半

React / Node.js / CDN / JSBridge

• H5 资源打包后随 App 启动预下载，WebView 请求时优先命中本地资源，未命中再回源
• 支持增量更新（按文件哈希差分）和版本回退，出问题时服务端下发回退指令，不需要发 App 版本
• 离线包命中率 96%，页面秒开率从约六成提升到九成以上，弱网下页面打开失败的投诉明显减少

Node.js / NestJS / GitLab CI / Docker

• 统一脚手架、代码规范、发布流水线和质量门禁，新项目从创建到第一次上线只要 半天
• 提供构建产物分析和依赖升级看板，按团队展示包体积变化和过期依赖，推动各团队定期治理
• 用 Babel 插件写了一批 codemod，批量完成组件库大版本升级中的 API 迁移，改动 2000 多个文件