-
- About me. 关于我
- 8年前端开发经验,具有前端团队管理经验。主导过多个ToB/ToC项目开发,熟悉基于前端工程化的多端开发,擅长复杂业务场景下的技术方案设计、开发效能提升。对前端基础建设与团队建设有丰富实践经验,持续关注业界的新话题和新技术,有较强的技术追求和业务敏锐度。
-
- Skill. 技能清单
-
熟悉浏览器标准与规范,熟练使用HTML、CSS(less/scss),具有像素级还原设计稿的能力,能够实现复杂布局与动画。
-
扎实的JavaScript/TypeScript/ES6语法基础,具备良好的编程习惯和代码规范。
-
熟练掌握Vue3/Vue2及React技术栈,深入了解过其相关原理,能够熟练进行组件化和模块化开发。
-
熟悉AngularJS框架,配合requireJS及ui-router在早期开发过模块化的单页面应用。
-
熟练掌握前端工程化相关的工具链,如Webpack、Vite、Gulp等,具备前端性能优化的实践经验。
-
熟悉Taro、uni-app跨平台框架,具备多个小程序开发及部署上线的实践经验。
-
熟悉Node.js生态,使用Egg.js框架及MongoDB数据库开发过服务端应用,了解Linux的基本操作和Nginx配置,基于云服务器搭建过个人网站。
-
熟悉前端项目CI/CD自动化相关技术,能够独立完成项目部署。
-
具备小型前端团队管理经验,能够高效推动前端协作与项目落地,促进团队持续成长。
-
- Experience. 项目与工作经验
深圳市东信云科技有限公司 高级前端开发工程师 2019.01 - 2024.12
- 主导3个商业化项目的前端开发,进行技术选型与难点攻关,高质高效完成项目迭代。
- 主导业务组件库0→1搭建&开发,统一UI风格,为其他项目增效赋能,提高团队开发效率30%。
- 主导前端错误监控系统0→1搭建&开发,提升了产品稳定性和用户体验,前端异常报错累计减少80%以上。
- 主导前端团队建设,建立组内技术规范及工作流规范,累计输出文档20+份。
- 持续性对项目进行性能优化及效能提升,通过优化构建流程及代码重构,多个项目的构建及加载速度提升40%以上。
- 基于Verdaccio搭建部门npm私仓,封装npm包6个,提升了跨项目的开发效率。
- 实现AI&CodeReview自动化工作流,并推广应用至部门所有开发团队:使用egg.js搭建服务端,将AI集成进Gitlab,实现代码提交→Gitlab webhook→服务端请求大模型API→Gitlab评论→企业微信消息通知全链路自动化,为开发团队提供高效、智能的代码审查解决方案。
职责&成果:
-
营赛洞见-多模态营销垂直AI大模型(PC端、小程序、H5) 链接
项目描述:营赛洞见是东信云推出的国内首个通过国家网信办备案的营销垂域大模型,能够提供智能化营销解决方案。具备三大核心功能:营销文案生成、营销图片生成和智能化营销洞察。
技术栈:vue3ant-design-vuevitepiniatypescripttaro3taroUIpuppeteer
项目职责:
- 负责文案创作及文生图模块的开发,PC端基于SSE、小程序端基于WebSocket实现流式数据输出,并利用Web Worker优化数据渲染效果。
- 基于map结构处理对话逻辑,优化时间复杂度,支持多版本分支对话及动态分支调整功能,并通过路径依赖自动重构后续对话链。
- 基于canvas实现图片自定义涂抹调整功能,使用多层画布解决涂抹路径叠加效果的问题。
- 调研将对话记录生成海报的实现方案,最终使用Node.js+puppeteer搭建截图服务,高质量生成海报图片。
- 手动实现等宽瀑布流插件,同时支持虚拟滚动、图片懒加载、无限滚动等功能,并发布至公司npm仓库。
-
营赛洞察-内容营销全流程洞察SaaS平台(PC端、小程序、H5) 链接
项目描述:营赛洞察是一款面向品牌方的大数据营销洞察类产品,该产品基于主流社媒平台的海量大数据,为营销决策提供科学评估和分析。
技术栈:vue3ant-design-vueechartstypescriptuni-appuviewucharts
项目职责:
- 完成产品工作台、官网、小程序的技术调研及选型,使用Nuxt.js重构项目官网,基于服务端渲染优化官网的SEO。在项目中落地PWA(渐进式Web应用)技术,实现离线可访问的Web应用,提升用户体验。
- 持续性优化项目性能,开发auto-upload-plugin Webpack插件,自动将打包产物上传到CDN服务器,开发iconpack-split-plugin Webpack插件,移除未使用的icon资源,基于webpack分包、第三方库抽离、按需加载、图片懒加载等方式,降低打包产物体积50%以上,LCP从3.2s下降到1.5s。
- 开发node脚本,一键将图片资源上传到阿里云OSS,同时支持图片压缩、格式转换、解决命名冲突等功能。
- 基于echarts封装统一图表配置组件,支持配置生成多种类型图表,开发效率提高50%,实现配置项的深度merge,提升了图表的可扩展性。
- 基于静态资源版本对比,实现生产环境前端部署更新后通知用户刷新页面的功能,并封装成npm包发布至私仓,应用于多个项目。
-
运营管理系统
项目描述:支撑运营人员进行相关业务操作,随着产品业务模块越来越庞大,系统中大量复杂且类似的表单表格以及权限管理需要进行封装,提升开发效率与可维护性。
技术栈:vue3ant-design-vueviteecharts
项目职责:
- 表单:设计并实现了一套高度可配置化的表单解决方案,基于JSON Schema动态生成表单,覆盖20+种表单控件,解决了多业务场景下表单重复开发的问题,开发效率提升60%。
- 表格:基于antd的table组件进行二次深度封装,将数据请求、自定义列、分页等公共业务逻辑进行抽离,基于插槽透传实现可配置化的表格组件,减少了项目20%的代码量。
- 权限:简化权限配置流程,基于二维数组的配置文件,利用动态路由及自定义权限指令,实现了精细化的二维权限控制系统。
-
业务组件库(Donson-ui) 链接
项目描述:为了提升公司多个项目的前端开发效率,统一UI视觉规范,提升公司产品的品牌力,基于AntDesignVue开发的业务组件库。
技术栈:vue3ant-design-vuevitepnpmstorybooktypescript
项目职责:
- 主导业务组件库0→1的建设,基于pnpm workspace搭建的monorepo工程,组件库包含45+组件,并发布至公司npm私仓,应用于多个前端项目,提高团队开发效率30%。
- 个人贡献20+组件,输出组件库建设文档5+份,基于storybook搭建可交互式组件文档。
- 基于nodejs开发组件库脚手架工具,通过命令行的方式一键生成组件初始化模板,减少了开发组件时的重复性操作。
- 实现组件库的按需加载:通过vite配置生成独立的组件打包产物,同时在业务项目中配合unplugin-vue-components插件,自定义实现了组件库的resolver,支持业务项目中的组件自动导入。通过按需加载,使业务项目中加载的组件库代码体积减少了60%,显著提升页面加载速度。
-
前端错误监控系统
项目描述:一个实时监控网站运行状况的前端错误监控系统,通过捕捉和分析前端异常,帮助开发者及时发现并解决问题。已应用于公司内部多个前端项目,前端异常报错累计减少80%以上。
技术栈:egg.jsmongoDBvueecharts
项目职责:
- 设计并实现前端SDK,支持自定义配置,包含错误捕获、信息上报等功能,兼容主流浏览器,并封装成npm包发布至公司私仓,方便多个项目接入。
- 开发vite插件,通过注入SDK中封装好的上报方法,使得项目中已被捕获的错误也能一键上报,提高了错误监控率。
- 服务端使用egg.js+MongoDB开发,处理及存储上报信息,前端使用vue+echarts搭建可视化平台,分析错误信息。
- 结合SourceMap库反解还原错误堆栈,精准定位异常代码行,同时接入企业微信api进行消息通知,全链路流程极大提高了问题排查效率。
平安科技(深圳)有限公司 前端开发 2016.11 - 2018.12
-
平安云通信管理平台
技术栈:reactreact-routerreduxantdwebpack
项目职责:
- 个人独立搭建的react项目,封装了20+全局组件与公共方法(如条件查询、树选择器等),采用高阶组件(HOC)模式,实现组件的复用和解耦,提升了代码的可维护性和扩展性。
- 负责权限管理、动态表单渲染等核心模块开发,结合Immutable.js降低不必要的渲染,提高组件渲染效率。
- 使用Redux Thunk中间件处理异步操作,优化数据请求流程,实现全局及局部的加载状态管理,确保数据加载和更新的稳定性。
- 作为前端接口人,协助上下游团队进行线上问题定位与修复,并带领前端新人进行项目开发、融入团队。
-
平安云服务控制台
技术栈:angularJSui-routerrequireJStinyUIgulp
项目职责:
- 基于angularJS和requireJS开发了平安云多个服务的控制台,实现了高度模块化的单页面应用,提高了项目的开发效率与可维护性。
- 基于angularJS service和jQuery ajax封装了支持promise的ajax库,并支持loading效果。
- 使用gulp构建工具优化前端开发工作流,通过编写任务脚本实现自动化的代码压缩、合并、代码检查和CSS预处理。
深圳市云竞信息技术有限公司 前端开发 2015.9 - 2016.10
- 技术栈:vue.jsvue-routervuexvue-resourcebootstrapjquery
- 参与公司内部跨境电商管理系统及官网的前端开发,包括供应商管理、采购、产品列表、报表等几大功能。
- 负责全面分析现有项目jQuery代码架构,使用vue1.0进行重构,实现从DOM操作到数据驱动的转变。
个人项目
-
贪吃蛇AI 链接
- 全网首个用JavaScript实现的能够自动吃满全图的贪吃蛇AI,基于BFS算法和DFS算法设计了AI的核心寻路算法,解决了自动寻路、碰撞检测、无效路线识别等复杂问题。
- 通过算法优化,引入虚拟路线模拟机制,解决了蛇身过长时导致的路规划难题,实现了高效的路径规划,响应时间低于50ms。
-
AI对话应用 链接
- 参考DeepSeek的交互,基于不同大模型API Key实现的AI对话应用,支持多个主流大模型。使用vue+antd构建体验良好的前端界面,服务端使用egg.js+mongoDB搭建,利用SSE实现AI消息流式响应。支持JWT登录鉴权、重新生成、分支对话、代码高亮、Markdown渲染等主流AI功能。
- 开发基于微信公众号的服务端接口,将AI能力接入个人微信公众号,利用promise任务队列及全局缓存的方法将公众号超时时间限制由5秒提升至15秒。
- 基于阿里云云服务器,使用Nginx+pm2将前后端服务部署至个人网站并优化性能,编写shell脚本并基于github webhook实现提交代码后自动化构建与部署上线。
-
- Education. 教育经历
武汉轻工大学 机械工程 2010.09 - 2014.06