技能
- 前端框架:深入理解Vue.js,有React项目开发经验,能快速上手新框架。
- 状态管理:熟悉Vuex和Redux等状态管理工具,有效管理组件状态,提升应用性能。
- 服务端渲染:熟练使用Nuxt.js进行SSR,优化 SEO 和首屏加载时间。
- 构建工具:熟练掌握Webpack,能够自定义 Plugins 解决复杂业务问题。
- 代码质量:良好的 Git 实践,重视 Code Review ,保证代码质量和团队协作。
- 语言技能:除了前端技术,还掌握Python,用于解决开发中的自动化问题。
- 英语能力:良好的英文阅读能力,习惯阅读官方文档。
项目经验
xxxx2022.12-现在
XX 平台
- 技术栈:vue ,elementUI ,Echarts ,
-
任务:
- 系统日常迭代,需求评审,技术方案编写。
- 重写并封装 ElementUI 组件以适应特殊业务需求。
- 50+SDK 配置管理重构
难点:
- 海量数据报表:利用 Vue.js 的响应式机制和 Echarts.js 进行数据可视化,使用 axios 管理重复请求,并引入 Web Workers 处理 Excel 大文件导出。
- 50+SDK 配置:创建抽象层封装广告平台 SDK 配置,实现基于类继承的 SDK 配置管理策略,优化了代码复用性和维护性,提高了开发效率。
- 特殊业务适应性:深入学习 ElementUI 源码,根据业务需求进行组件定制化开发,如定制化开发 ElementUI 的 Select 和 Table 组件,引入虚拟滚动和数据优化,提高了处理海量数据的性能,同时维持了其风格和易用性。
官网重构项目(pc/h5)
原官网采用 Vue.js 开发的单页应用( SPA )存在 SEO 效果不佳的问题,导致网站在搜索引擎上的可见度和点击率低。
- 技术栈:nuxtjs ,tailwindcss ,vue-i18n ,axios
- 任务:重构官网,使用服务器端渲染( SSR )改善 SEO ,实现响应式设计以适配 PC 和移动端,同时支持网站的国际化和优化用户体验。
难点:
- SSR 与 SEO 优化:选用 Nuxt.js 进行 SSR ,优化 SPA 的 SEO 问题,集成 Google Analytics 和 Google Search Console ,提升网站在搜索引擎上的表现,月均 SEO 点击率提升 900%。。
- 响应式设计与性能优化:引入 tailwindcss 实现高效的响应式设计,使用其实用性第一的 CSS 类,快速开发出适配不同屏幕尺寸的布局。结合 REM 单位和媒体查询,确保了一套代码在 PC 和移动端的完美适配。采用雪碧图技术压缩图片,进一步提升网站加载速度。
- 国际化实施:通过 vue-i18n 实现官网内容的国际化,满足全球用户的语言需求,支持公司业务的国际拓展。
XX 科技 2021.3-2022.10
XX 系统
一个大型路由分发式 saas 系统,帮助线下零售店管理会员。包含子项目有会员管理系统,企业管理系统,营销管理系统,商品管理系统,数据分析系统,等。
- 技术栈:vue ,ElementUI ,qiankunjs
- 任务:我的任务是将单体前端应用改造为基于 qiankun.js 的微前端架构,实现子项目的独立开发和部署,同时开发具有高度用户自定义能力的 H5 商城界面、用户行为监测组件,并优化现有资源。
难点:
- 微前端架构改造:使用 qiankun.js 重构为微前端架构,分离子项目,提升开发与部署效率。
- 自定义装修功能:实现可视化编辑器,支持拖拽自定义 H5 商城界面,实现个性化内容展示。
- 用户行为监测组件:开发埋点组件,自动采集用户数据,通过事件节流优化数据上报。
- 资源优化:运用 Python 脚本自动替换老旧 SVG 图标,提高维护效率和界面一致性
公共组件库项目
在 XX 系统的开发过程中,面临一个挑战:多个项目独立引用 CDN 上的公共组件导致组件版本混乱,每次更新组件都需要所有引用该组件的项目重新发布,大大降低了开发和部署效率。
- 任务:我的职责是维护和更新公共组件库,包括补充缺失的文档、更新老旧组件和开发新组件(如自定义装修、埋点),同时找到一种方法解决组件版本混乱和重复发布问题。
难点:
- 组件库更新与开发:更新老组件,补全文档,开发新组件如自定义装修和埋点组件。
- 版本管理策略:设计组件版本映射表,实现动态版本引用,减少重复发布。
- 自动化流程:开发自动化脚本更新映射表和发布组件,提升维护效率。
公众号小程序
原小程序开发人员离职,作为主 Web 开发,我面临了在没有小程序开发经验的情况下,需要快速接手并完成公众号小程序积分兑换模块的开发任务。项目时间紧迫,对功能的实现有着明确的截止日期。
- 技术栈: 原生小程序 ,WeUI
- 任务:实现一个积分兑换模块,允许会员查看积分余额,选择礼品进行兑换
难点
- 快速学习:我利用业余时间和工作之余,通过官方文档、在线教程和技术社区的资源,快速学习小程序的开发框架和 WeUI 组件库的使用。
- 高效开发:在理解了小程序的基本概念和 WeUI 的使用方法后,我开始设计和开发积分兑换模块。通过模块化开发和代码复用,我提高了开发效率。
- 团队协作:在开发过程中,我主动与产品沟通,针对需求划分优先级,确保客户最需要的功能一定上线。同时定期同步开发进度,同时寻求 UI 设计和后端接口的支持,确保了项目的顺利进行。
XXXX 有限公司 2019.6– 2021.2 (后台管理系统,H5 )
大屏可视化。
一个展示全球专利、论文、科研机构和人员信息的大屏可视化系统,分为 pc 和大屏
- 技术栈:React ,Echarts
- 任务:负责实现一个响应式、高性能的大屏可视化系统,支持动态数据展示。
难点
- 动态数据展示:开发动态数据驱动的可视化组件,包括关系图、树图和地图。
- 性能优化:实施懒加载、数据分片加载和 ECharts 图表优化,提高页面加载速度和渲染效率。
- 响应式设计:实现自适应布局,保证在不同设备上的兼容性和用户体验。
- 交互增强:通过交互式元素和动画,提升用户的数据探索体验。
XX 招标平台(后台管理系统)
为 XX 集团负责招标采购的系统,包括系统管理,权限管理,版本管理,基础数据,招标采购,供应商等模块,项目需要处理大量表单,面临代码重复和性能优化的挑战。
- 技术栈:umi,react,antd,webpack
- 任务:负责项目的设计和开发,包括基础数据,招标采购等核心模块,以及权限管理的设计和实施。
难点:
- 代码优化:通过维护 20+的表单配置,实现了需求的抽象和封装,减少了大量类似代码,提高了开发效率和代码的可维护性。
- 大文件上传:实现了大文件的切片上传功能,使用 Blob 技术和 async-pool 进行并发控制,提升了文件上传的效率和稳定性。
- 性能优化:采用 Lighthouse 、webpack-bundle-analyzer 、React Profiler 等工具进行性能分析,通过配置按需加载、代码压缩、执行优化等措施,显著提升了项目的加载速度和运行效率。
个人介绍
- 注重效率: 不喜欢重复的的工作,平时工作中会利用脚本等方式自动化工作中的一些重复内容。
- 热爱技术: 会定时查看技术趋势等,遇到感兴趣的内容回去试试 demo ,便于日后应用于实际项目中