个人优势

• 三年前端开发经验，主要做 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 以内，首次打开时间明显缩短

教育经历

个人优势

• 五年全栈开发经验，在 6 人技术团队里负责前端和一半后端服务，能独立把一个功能从页面、接口、数据库做到部署上线
• 熟悉 Next.js App Router，理解 SSR、SSG、ISR 和 RSC 的区别，用它重写官网和文档后自然搜索流量涨到原来的 2 倍多
• 后端以 NestJS + PostgreSQL + Redis 为主，排查过慢查询、索引失效和缓存一致性问题，核心接口 P95 从 800ms 左右降到 120ms
• 做过多租户 SaaS 的数据隔离和权限模型（角色 + 数据范围），前后端共用一份权限定义
• 熟悉异步任务和队列，用 BullMQ 改造过万行级 Excel 导入导出，失败行可下载错误报告
• 有数据库变更的安全习惯：加字段 → 双读 → 回填 → 删旧字段，发布前在预发用脱敏数据验证迁移耗时
• 负责过部署体系：GitHub Actions 构建镜像 + 蓝绿发布 + 健康检查，发布用户无感，异常可秒级切回
• 做过日志检索服务，把按天扫文件改为写入 ClickHouse，常用查询从分钟级降到秒级
• 落地过 RAG 客服助手（文档切片、pgvector 检索、SSE 流式输出），上线三个月人工工单减少约三分之一
• 关注成本，梳理云资源后把低频计算改为定时任务、数据库读写分离，服务器成本下降约 30%
• 技术栈：Next.js、React、TypeScript、Tailwind CSS、NestJS、Prisma、PostgreSQL、Redis、ClickHouse、Docker、GitHub Actions、pgvector / RAG

工作经历

公司做中小企业客户管理系统，技术团队 6 人，我负责前端和一半的后端服务，产品服务 300 多家企业客户。

• 官网和文档重构：官网和帮助文档原来是客户端渲染，搜索引擎收录很差，用 Next.js 重写（详见项目经历），半年内官网自然搜索流量增长到原来的 2 倍多
• 多租户数据隔离：所有业务表带租户字段，在 ORM 层统一注入租户条件，查询时如果漏了租户条件直接报错，从机制上避免数据串号
• 部署和运维：从手动登录服务器部署改为 GitHub Actions 构建镜像 + 蓝绿发布，健康检查通过后再切流量，发布过程用户无感；接入日志和告警，常见故障有对应的排查手册
• 成本控制：梳理云资源用量，把低频的报表计算改为定时任务，数据库按读写分离调整规格，服务器成本下降约 30%

游戏运营平台组，前后端共 5 人，支撑公司 3 款游戏的日常运营。

• 开发游戏运营后台（活动配置、礼包发放、玩家查询、数据报表），用 React + Ant Design Pro 搭建
• 礼包发放原来由运营填表、后端手动执行脚本，改为后台可视化配置 + 审批，发放出错的情况基本消失
• 运营查询玩家行为日志要等几分钟，用 Node.js 写了日志检索服务（详见项目经历），常用查询从 分钟级降到秒级

项目经历

Next.js / NestJS / PostgreSQL / Redis / BullMQ / Docker

• 接口性能：客户列表在大客户（几十万条数据）那里经常超时。通过慢查询日志定位问题，补了联合索引，计数改为异步更新的统计表，热点数据加 Redis 缓存并在写入时主动失效；核心接口 P95 从 800ms 左右降到 120ms
• 异步任务：Excel 导入导出原来是同步接口，万行级数据经常超时。改为 BullMQ 任务队列，前端轮询进度，失败的行生成错误报告供用户下载修改
• 权限模型：设计基于角色和数据范围的权限模型（本人、本部门、全公司），前后端共用一份权限定义，前端按钮和后端接口校验保持一致
• 发布回滚：数据库变更采用先加字段、代码双读、数据回填、最后删除旧字段的顺序；一次租户配置异常在健康检查阶段被发现，直接切回上一版镜像，没有让客户看到错误页面

Node.js / SSE / pgvector / 大模型 API

• 帮助文档按标题层级切片，向量化后写入 pgvector；用户提问时先检索相关片段，再交给大模型生成回答，答案附文档出处链接
• 回答用 SSE 流式输出，首字时间 1 秒左右；对检索不到的问题记录下来，作为补充文档的依据
• 检索结果按相似度设门槛，低于门槛直接转人工，不让模型凭空回答；上线三个月后，人工客服工单减少约 三分之一

Next.js App Router / MDX / Vercel OG

• 文档用 MDX 写，构建时静态生成，内容更新后按需再验证（ISR），不用整站重新构建
• 补齐页面标题、描述、结构化数据和站点地图，每篇文档自动生成分享卡片图
• 文档搜索用构建期生成的倒排索引，在浏览器端检索，不依赖第三方服务；首屏 LCP 稳定在 1.2s 左右

Node.js / ClickHouse / Kafka

• 游戏服务器的玩家行为日志原来按天落文件，运营查一个玩家一周的记录要扫 7 个大文件，耗时几分钟
• 改为日志经 Kafka 写入 ClickHouse，按玩家 ID 和时间建排序键，支持按玩家、事件类型、时间范围组合查询
• 常用查询从分钟级降到 1 秒以内，运营排查玩家投诉的效率明显提升；存储按月分区，过期数据自动清理

教育经历

工作经历

所在的增长前端组负责活动、拉新和会员相关页面，组内 8 人。我负责活动搭建平台和核心落地页的性能。

• 活动搭建平台：负责平台的编辑器和物料体系，运营自助搭建活动页，每月产出 300 多个页面，日常运营活动基本不再需要前端开发
• 落地页性能治理：拉新落地页移动端 LCP（P75）长期在 3.4s 左右。用 Performance 面板和 Web Vitals 数据定位到三个原因：首屏大图、同步加载的第三方统计 SDK、首屏外模块打进了主包。分别做了图片换 AVIF 并按设备像素比出图、SDK 改为空闲时异步注入、非首屏模块按需加载，LCP 降到 1.7s，落地页跳出率下降约 15%
• Monorepo 改造：组内 20 多个包原来分散在不同仓库，依赖升级要逐个仓库改。迁到 pnpm workspace + Turborepo，开启远程缓存跳过未改动的包，CI 从 20 多分钟降到 7 分钟左右
• 稳定性：建立落地页发布前的检查清单（体积预算、Lighthouse 分数、关键接口降级），上线以来大促期间没有出现 P1 级前端事故

公司做互联网理财，我在 6 人前端组负责理财购买链路和公共组件。

• 负责理财产品购买和赎回 H5。统计支付失败原因后发现，重复点击和支付回跳丢失状态占了大头，补上按钮防重、订单号幂等和支付结果轮询兜底，支付成功率提升约 2 个百分点
• 设计前端灰度发布方案：静态资源按版本号上传 CDN，入口 HTML 由网关按用户尾号分桶下发，出问题时修改网关配置即可切回上个版本，回滚时间从 半小时缩短到 1 分钟
• 参与公共组件库建设，负责金额输入、验证码、协议勾选等金融场景组件，统一了键盘、精度和防重的处理

项目经历

React / TypeScript / Zustand / Node.js / iframe

面向运营的低代码平台，通过拖拽物料、配置属性和数据源来搭建活动页，发布后生成静态页面上线。

• 物料协议：设计物料协议，包含属性 Schema、事件和数据源三部分，业务组件按协议注册即可在编辑器中拖拽和配置；目前平台有 120 多个物料，由 3 个业务团队共同维护
• 样式隔离：早期画布和编辑器在同一个文档里，物料的全局样式会影响编辑器界面。改为画布放进 iframe，主窗口和画布之间通过 postMessage 同步页面配置和选中状态
• 撤销重做：页面配置用不可变数据管理，每次修改记录 patch（Immer），撤销重做只需要应用反向 patch，长时间编辑内存也比较稳定
• 发布链路：发布时用 Node.js 把页面配置预渲染成静态 HTML 上传 CDN，和原来的 SSR 方案相比少了一次服务端渲染，大促流量高峰时不会给服务端增加压力

TypeScript / Rollup / Performance API

团队自研的监控 SDK，接入了公司 30 多个前端项目，数据进公司的日志平台做告警和看板。

• 采集 JS 错误、Promise 未处理异常、资源加载错误、接口错误、白屏和 Web Vitals 指标，SDK 压缩后约 4KB
• 白屏检测：页面加载后在视口内取若干采样点，用 elementsFromPoint 判断是否只有容器节点，连续多次为空判定为白屏
• 上报做了采样、批量合并和页面关闭时 sendBeacon 兜底，上报请求量比逐条上报减少约 90%
• 错误按「消息 + 堆栈首帧」做指纹聚合，配合 Source Map 在后台还原源码位置，同一个问题不再刷屏告警

Node.js / Nginx / CDN / 网关配置中心

理财 H5 每次发版都是全量上线，出问题只能重新打包回滚，最长一次影响了 40 分钟交易。

• 静态资源按版本号目录上传 CDN 且永不覆盖，入口 HTML 不缓存，由网关根据用户尾号决定返回哪个版本的入口
• 发布流程拆成「1% → 10% → 50% → 全量」四档，每档观察监控大盘的错误率和支付成功率，异常时一键切回
• 上线一年，期间拦下 3 次有问题的版本，影响用户都控制在 1% 灰度范围内

React / Rollup / Babel / Storybook

• 沉淀 30 多个金融场景组件（金额输入、安全键盘、验证码、协议勾选、风险测评），统一了精度、防重和无障碍处理
• 组件库原来整包引入，接入方页面平白多出 200KB 的代码。改为每个组件独立入口并声明 sideEffects，配合 Tree Shaking 实现按需引入，典型页面减少约 150KB（gzip 前）
• 金额输入统一用整数分计算和展示时格式化，避免浮点误差；补齐边界单测（大额、负数、粘贴带逗号的数字）