负责电商平台核心交易链路（商品详情/购物车/结算页）的前端架构设计与实现，主导性能优化与用户体验提升，协同后端、UI团队完成需求落地，保障大促期间高并发场景下的系统稳定性。

• 主导商品详情页全链路重构，基于Vue3+TypeScript+Vite技术栈，针对首屏加载慢（原LCP 3.2s）痛点，采用组件级懒加载+预加载策略，结合Webpack SplitChunksPlugin优化资源拆分，同步引入Web Vitals监控（通过Sentry自定义埋点），最终LCP降至1.8s（提升43.75%），FCP提升51%，大促期间页面崩溃率从0.8%降至0.2%
• 解决复杂交互场景下的状态管理混乱问题，基于Pinia重构购物车模块，设计可扩展的「商品SKU选择器」状态机，支持跨规格快速切换（响应时间<100ms），同时封装通用缓存策略（LocalStorage+IndexedDB），使购物车数据持久化成功率从92%提升至99.6%
• 主导前端性能监控体系升级，搭建基于TAM（腾讯应用性能监控）的自定义看板，新增「关键按钮点击热区分析」「滚动深度流失率」等12项业务指标，结合A/B测试验证交互优化方案，推动首页转化率提升8.2%
• 应对618大促流量洪峰（峰值QPS 2.3w），优化静态资源分发策略，将CDN节点覆盖从国内扩展至东南亚，同步实现图片懒加载+WebP格式自动降级，大促期间页面平均加载时间稳定在1.5s内，用户跳出率下降15%

负责企业级SaaS管理系统（CRM/OMS）的前端开发与维护，聚焦中后台业务场景的高效实现，参与组件库建设与技术规范落地，保障多端（PC/平板）适配与用户体验一致性。

• 独立完成CRM客户跟进模块开发，基于Element Plus二次封装「时间轴+待办事项」复合组件，支持自定义事件类型与拖拽排序，通过Vue指令实现表单字段动态关联校验，使销售跟进效率提升30%（单客户信息录入时间从5分钟缩短至3分钟）
• 针对中后台表格数据量大（单页1000+条）的痛点，主导实现「虚拟滚动+分页混合加载」方案，结合Intersection Observer API监听可视区域，将渲染耗时从220ms降至45ms，同时支持列拖拽排序与Excel导出（兼容xlsx.js），用户操作满意度提升40%
• 推动团队前端工程化升级，主导搭建基于Vite的本地开发脚手架，集成ESLint+Prettier+Husky代码检查链，配置自动化测试（Jest+Testing Library）覆盖核心业务组件，代码提交缺陷率下降28%，新人上手周期从7天缩短至3天
• 解决多端适配难题，基于rem+vw混合布局方案，实现管理系统在PC（1920px）、平板（1024px）下的布局自适应，同步优化触控事件响应（touch-action: manipulation），平板端操作误触率从12%降至3%

负责公司官网及内部运营活动页的前端开发，参与需求评审与技术方案讨论，配合UI/后端团队完成页面还原与功能联调，保障上线后页面稳定性与用户体验。

• 独立完成公司官网重构（HTML5+CSS3+ES6），采用Flexbox+Grid布局实现响应式设计，优化图片加载策略（WebP格式+懒加载），使PC端加载时间从4.1s降至2.3s，移动端加载时间从6.8s降至3.5s，百度搜索资源平台评分从75分提升至92分
• 参与双11大促活动页开发，使用Canvas实现动态抽奖转盘（支持10万+并发请求），通过防抖+节流优化用户点击事件，配合后端限流策略，活动期间页面崩溃率控制在0.5%以内，抽奖中奖率偏差<0.3%（符合业务预期）
• 搭建前端本地开发环境，配置Webpack多页面打包方案，解决多活动页资源冲突问题，同步封装通用组件库（轮播图/倒计时），使活动页开发效率提升40%（单页开发周期从3天缩短至1.8天）
• 定位并修复线上页面异常问题，通过Chrome DevTools Performance面板分析JS执行耗时，发现某活动页因大量DOM操作导致重排频繁（FPS<30），改用DocumentFragment批量操作后，FPS稳定在55+，用户卡顿反馈下降90%

企业协同平台前端架构升级及性能优化项目

• 项目背景：公司核心ToB协同产品原基于Vue2+Webpack4架构，随着业务覆盖销售、客服、项目管理多模块，出现包体积过大（首屏加载资源超3MB）、Webpack冷启动编译耗时12分钟、跨端（Web/轻量化H5/小程序）适配需重复开发三大痛点。我的核心目标是主导架构升级，将项目迁移至现代化技术栈，同时解决性能瓶颈与多端复用问题，支撑业务快速迭代。
• 关键难题：①原有组件库深度耦合业务逻辑，无法跨端复用；②Webpack构建流程冗余，缺乏缓存策略；③多端适配依赖不同技术栈（Web用Vue、小程序用原生），开发效率低。需结合微前端、编译优化、跨端渲染等技术实现突破。
• 核心行动：1. 架构选型：采用Vue3+Vite+TypeScript重构基础架构，用Monorepo管理组件库与业务模块，基于“原子组件-业务组件-场景模块”分层设计，将通用组件抽离为独立包，支持Web、小程序共用；2. 构建优化：Vite替换Webpack后，配置SplitChunks按路由/类型拆分代码，启用持久化缓存与Gzip压缩，将冷启动时间降至2分钟内；3. 多端适配：设计“统一渲染层”，Web端保留Vue3逻辑，小程序端通过Uniapp的Conditional Compilation结合自定义指令映射组件，实现一套代码编译到两端；4. 微前端落地：将核心模块（如审批流、客户跟进）拆分为独立子应用，用Qiankun做容器管理，降低模块间耦合。
• 项目成果：①性能指标：首屏加载时间从4.2秒缩短至1.8秒，包体积减少40%；②开发效率：跨端开发成本降低50%，多端bug率下降30%；③业务价值：支撑产品上线“轻量化H5客户门户”新功能，吸引12家KA客户签约，用户月活提升18%。个人主导了架构设计与落地全流程，推动团队从“业务驱动开发”转向“技术赋能业务”。

ToB客户管理系统（CRM）复杂交互与实时数据可视化模块开发

• 项目背景：公司CRM系统原数据看板功能仅支持静态图表，销售团队需手动导出数据做分析，且客户行为追踪（如商机跟进路径、沟通记录）的交互逻辑混乱，无法支撑决策。我的目标是开发“实时数据+高交互”的可视化模块，提升用户数据洞察能力与操作效率。
• 关键难题：①实时数据（如商机状态变更、客户触达记录）推送频率高，直接渲染导致页面卡顿；②拖拽式报表生成、多维度钻取等复杂交互逻辑分散，难以维护；③移动端与桌面端布局适配困难，小屏幕下图表信息丢失严重。需结合数据编排、状态管理、响应式设计解决。
• 核心行动：1. 实时数据处理：用Web Worker将ECharts的数据更新逻辑移至后台线程，结合防抖与节流策略，将数据处理延迟从150ms降至30ms以内；2. 交互逻辑抽象：设计“可视化交互状态机”，用Redux Toolkit管理拖拽位置、钻取层级、筛选条件等状态，将交互代码复用率提升至70%；3. 响应式布局：采用CSS Grid结合媒体查询，定义“桌面端-平板-手机”三套布局规则，确保图表在小屏幕下自动切换为堆叠式或缩略模式；4. 组件封装：提炼“钻取联动图表”“可编辑数据表格”等通用组件，支持业务方快速搭建个性化看板。
• 项目成果：①用户体验：数据更新时页面帧率从30fps稳定至60fps，复杂交互响应时间缩短70%；②业务价值：销售团队使用该模块后，商机跟进效率提升25%，客户转化周期缩短12%；③团队提效：通用组件被后续3个项目复用，减少了50%的重复开发工作。个人突破了实时数据与高交互的性能瓶颈，成为团队复杂功能开发的骨干成员。

• 因痛心于年轻人对历史的疏离，我在B站创立「古人脱口秀」栏目，用职场梗解构历史事件（如《雍正皇帝的KPI保卫战》）。通过设计「颠覆认知-史料佐证-现代共鸣」三幕剧本模板，单期视频最高收获1.7万条弹幕互动。
• 两年间栏目播放量突破180万，作品被多地中学选为教学素材。这段经历磨砺出将学术内容转化为大众语言的能力，也让我理解到真实用户反馈才是创作者的指南针。