技能

• 前端框架：深入理解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 等工具进行性能分析，通过配置按需加载、代码压缩、执行优化等措施，显著提升了项目的加载速度和运行效率。

个人介绍

1. 注重效率： 不喜欢重复的的工作，平时工作中会利用脚本等方式自动化工作中的一些重复内容。
2. 热爱技术: 会定时查看技术趋势等，遇到感兴趣的内容回去试试 demo ，便于日后应用于实际项目中