山月-三年-前端工程师

微信：shanyue-bot | 18334567890 | me@shanyue.tech | shfshanyue | https://shanyue.tech

教育经历

• 山西⼤学 硕士 2012-2015
• 山西大学 本科 2008-2012

个人技能

• 数量掌握 JavaScropt ES6+ 等新特性，以及 TypeScript 等
• 熟练掌握 React 全家桶，如 react-router，redux，ant-design 等
• 熟练掌握 Webpack，并可通过其优化项目的开发者体验以及用户体验，如快速地 npm run build 以及快速地呈现网站内容
• 熟练掌握 Rollup，及优化项目性能，以及对 npm 包进行各种模块化格式打包以及优化
• 熟练掌握 node.js，并上线多个 node.js BFF 项目，使用 redis 优化缓存以及使用 postgres 进行数据存储

工作经历

水风科技

2019-2023

前端 Leader。独立负责XXXX系统与部门前端基础建设。

山月科技

2016-2019

项目经历

XXX 后台管理系统

技术栈：react/redux/ant-design/tailwindcss/ahooks/@tanstack/react-query/dayjs/webpack/docker

职责以及难点：

1. 优化包含 100+ 字段的大型表单渲染性能 ，实现表单分片渲染和虚拟滚动。采用 React.memo 和 useMemo 细粒度优化，减少 50% 不必要的重渲染。实现表单字段的按需加载，首次渲染时间从 3秒 降至 300ms 。使用 Web Worker 处理复杂表单逻辑，使主线程释放 80% 的计算负担，有效避免写入表单时的卡顿现象。
2. 使用 @tanstack/react-query 优化 API 请求缓存，实现智能的请求去重和数据新鲜度管理。减少 60% 的重复请求，将后端请求压力降低 40% ，网络 IO 压力降低 50% 。实现乐观更新，在 200ms 内完成用户操作的 UI 响应。设计并实现二级缓存策略，结合 localStorage ，支持离线数据访问，提升弱网环境下的用户体验。
3. 全面优化网站首屏性能 ，将首屏加载时间从 4秒 减少到 1.2秒 。使用 webpack 进行代码分割，实现核心模块体积 55% 的减少。用 dayjs 替代 moment ，减少 77% 的日期处理库体积。实现关键 CSS 内联和非关键资源懒加载。使用服务端渲染 (SSR) 优化首屏内容加载，提高用户留存率 30% 。
4. 二次封装 20+ React 基础组件和 10+ 业务组件 。开发 ComBoBox 组件，支持大数据量和复杂搜索逻辑。 ProTable 组件实现服务端排序、筛选和分页，性能提升 40% 。 ProForm 组件支持动态表单配置和联动校验。 Business 、 Order 、 Customer 、 Tenant 等业务组件封装核心业务逻辑，提高开发效率 35% ，代码复用率提升 60% 。
5. 使用 Docker 优化项目部署流程，将部署时间从 30分钟 减少到 5分钟 。通过多阶段构建，将 Docker 镜像体积优化 40% 。实现镜像层缓存策略，减少 70% 的构建时间。配置 GitLab CI 实现代码质量检查、单元测试、E2E 测试等 15+ 项质量保障工作。实现蓝绿部署和灰度发布，将发布风险降低 80% 。
6. 构建完善的 CI/CD 流程，实现提交代码到生产环境部署全流程自动化。集成 Jest 进行单元测试，实现 80% 的代码覆盖率。使用 Cypress 进行 E2E 测试，覆盖核心业务流程的 50+ 测试用例。集成 Codecov 进行代码覆盖率统计和可视化展示。实现每次提交的增量代码覆盖率检查，确保新增代码的测试覆盖率不低于 85% 。
7. 实现高度可定制的主题系统，支持动态主题切换和品牌定制。基于 Ant Design 的定制主题能力，开发主题编辑器，支持实时预览。使用 CSS 变量实现全局样式管理，减少 50% 的样式代码。开发 10+ 预设主题，满足不同客户需求。实现主题的按需加载，优化首次加载性能 25% 。
8. 设计并实现前端监控和日志系统，实时跟踪应用性能和错误。使用自定义埋点和百度统计，收集用户行为数据。开发性能监控面板，展示 15+ 关键性能指标。实现错误聚合和报警机制，将问题解决时间缩短 40% 。通过性能优化，提升页面加载速度 30% ，用户停留时间增加 20% 。
9. 开发基于角色的访问控制 (RBAC) 系统，实现细粒度的权限管理。设计权限模型，支持多租户、多角色的复杂业务场景。开发可视化的权限配置工具，支持动态权限分配。实现前端路由和组件级别的权限控制，提高系统安全性。优化权限验证性能，减少 70% 的权限校验时间。
10. 实现大规模数据的前端处理和可视化 。使用虚拟滚动技术，实现 100万+ 数据量的流畅渲染。集成 ECharts ，开发 15+ 种复杂图表组件。实现图表的联动分析和钻取功能。优化大数据量下的图表性能，渲染速度提升 60% 。开发数据可视化生成器，支持非技术人员自主创建报表。
11. 开发小程序跨端整合方案，实现与 Web 应用的数据和功能共享。使用 Taro 框架，将 80% 的业务逻辑复用到小程序端。设计统一的状态管理和数据同步策略，实现 Web 和小程序的无缝切换。优化小程序包体积，主包大小控制在 1MB 以内。实现小程序的分包加载，首屏加载时间减少 40% 。
12. 实现国际化 (i18n) 解决方案，支持动态语言切换。使用 react-intl 管理翻译，支持 10+ 语言。开发翻译管理工具，支持在线编辑和自动翻译集成。实现按需加载语言包，优化多语言切换性能。设计并实现 RTL 布局支持，适配阿拉伯语等从右到左的语言。国际化改造后，海外用户增长 35% 。
13. 优化大文件上传和下载功能，支持断点续传和秒传。实现文件切片上传，单个文件大小支持 100GB 。使用 Web Worker 进行文件 MD5 计算，分片工作取代，不阻塞主线程。开发文件预览功能，支持 50+ 种文件格式在线预览。实现基于 OSS 的文件存储和 CDN 加速，文件下载速度提升 200% 。
14. 设计并实现前端微服务架构，使用 qiankun 框架集成 5+ 个子应用。实现应用间样式隔离和 JavaScript 沙箱，保证子应用独立性。开发应用间通信机制，支持跨应用状态共享和事件派发。实现子应用的按需加载和预加载策略，优化多应用切换性能。重构后，新功能开发速度提升 40% 。
15. 开发企业级表单设计器，支持 30+ 种表单控件，实现拖拽式布局。实现表单验证引擎，支持复杂的联动规则和计算公式。开发表单渲染引擎，支持 JSON 配置的动态表单生成。实现表单数据的版本控制和差异对比功能。通过可视化表单设计，减少 60% 的表单开发工作量。
16. 实现前端的离线功能和 PWA 支持，提高应用在弱网环境下的可用性。使用 Service Worker 缓存核心资源，实现核心功能的离线访问。开发 IndexedDB 数据同步机制，保证数据的一致性。实现后台同步，在网络恢复时自动处理离线操作。通过 PWA 改造，提高用户留存率 25% ，平均使用时长增加 30% 。