悟空-三年-前端工程师

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

教育经历

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

个人技能

• 熟练使用 JavaScript ES6+， TypeScript， 熟悉函数式编程和面向对象编程范式
• 熟练使用 Vue.js 生态系统， 包括 Vue 3， Pinia， Vue Router， 以及 Element UI
• 熟练使用现代前端工程化工具， 如 Webpack， Rollup， Vite， 能够优化构建过程和开发体验
• 熟练掌握响应式设计和移动端开发， 熟悉 PWA 技术
• 深入理解浏览器渲染原理， 能够进行前端性能优化和 SEO 优化
• 熟练使用 TailwindCSS， Sass 等 CSS 预处理器和框架

工作经历

水风科技 2019-2023

山月科技 2016-2019

项目经历

XXX 后台管理系统

技术栈: vue/pinia/vue-router/radix-vue/axios/echarts/sass/webpack/docker

职责以及难点:

1. 使用 Vue3 Composition API 重构 50,000+ 行 legacy 代码，将 80% 的组件改造为组合式函数。实现逻辑复用率提升 30%，代码行数减少 20%。重构过程中，设计并实现 15+ 个通用的组合式函数，如 useForm, useTable 等，显著提高代码可维护性和复用性。编写详细的迁移文档和最佳实践指南。
2. 实现 20+ 复杂的数据可视化需求，包括多维度数据分析图表和实时数据监控面板。使用 ECharts 绘制 10+ 类型的高级图表，如桑基图、热力图等。优化大数据量 (10 万+ 数据点) 下的渲染性能，实现 60fps 的流畅交互。集成 WebSocket，支持毫秒级的实时数据更新。
3. 优化大规模数据列表 (10 万+ 条) 的渲染性能，将初次加载时间从 3 秒降至 300ms。实现基于 IntersectionObserver 的虚拟滚动，支持 10 万+ 行数据的流畅滚动。实现分片渲染和懒加载，优化 DOM 操作。使用 Web Worker 进行大数据的前端处理，提升响应速度。
4. 封装 15+ 通用业务组件，如高级搜索、批量操作、权限管理等，提高团队开发效率 30%。实现基于 RBAC 模型的细粒度权限控制组件，支持动态权限分配。开发可配置化的表单和表格组件，减少 80% 重复代码。编写详细的组件文档和使用示例。
5. 集成 Jest 进行单元测试，实现 80% 的代码覆盖率。使用 Cypress 进行 E2E 测试，覆盖核心业务流程的 50+ 测试用例。实现组件快照测试，保证 UI 一致性。集成 Codecov 进行代码覆盖率分析。在 CI/CD 流程中自动运行测试，每次提交平均减少 5 个潜在 bug。
6. 使用 Webpack 优化打包构建流程，将构建时间从 10 分钟减少到 2 分钟，生产环境打包大小减少 40%。实现代码分割和懒加载，首屏加载时间减少 50%。配置多环境构建，支持开发、测试、预发布和生产环境。实现热模块替换 (HMR)，提升开发效率。
7. 设计并实现基于 Pinia 的状态管理方案，重构全局状态，将状态管理代码减少 30%。实现 20+ Store 模块，处理复杂的应用状态。集成持久化插件，优化用户体验。实现基于 Proxy 的响应式状态追踪，提供准确的性能分析。编写 Pinia 最佳实践文档。
8. 使用 Vue Router 实现复杂的路由管理，支持 50+ 动态路由和嵌套路由。实现路由级别的代码分割和预加载，优化页面切换性能。集成路由守卫，实现全局的权限控制和路由拦截。开发路由缓存机制，优化多标签页应用的内存占用和性能。
9. 基于 Radix Vue 开发 30+ 无障碍的 UI 组件，提高应用的可访问性 (WCAG 2.1 AA 级)。实现键盘导航和屏幕阅读器支持。开发主题系统，支持 10+ 预设主题和动态主题切换。使用 CSS 变量实现高效的样式覆盖和定制。
10. 使用 Axios 封装 HTTP 请求库，实现请求/响应拦截、错误处理和重试机制。集成 JWT 认证，处理 token 刷新和失效场景。实现请求缓存和并发控制，减少 50% 不必要的 API 调用。开发 Mock 服务，支持离线开发和测试。
11. 实现国际化 (i18n) 解决方案，支持 10+ 语言的动态切换。使用 vue-i18n 管理翻译，实现懒加载语言包。开发翻译管理工具，支持在线编辑和自动翻译集成。实现 RTL 布局支持，适配阿拉伯语等从右到左的语言。
12. 设计并实现前端日志和错误监控系统，捕获并上报 95% 以上的前端异常。集成性能指标 (Web Vitals) 采集，实现实时性能监控。开发错误聚合和分析面板，支持源码映射和错误重现。实现用户行为跟踪，辅助问题定位和分析。
13. 优化首屏加载性能，实现 2 秒内的首屏渲染 (3G 网络环境)。实现关键 CSS 内联和异步加载非关键 CSS。使用 Service Worker 缓存静态资源，实现离线访问能力。优化字体加载，实现字体分片和预加载。
14. 开发企业级权限管理系统，支持多租户、多角色的细粒度权限控制。实现动态菜单和按钮级别的权限管理。开发权限可视化配置工具，支持拖拽式的权限分配。集成单点登录 (SSO) 解决方案，提升多系统间的用户体验。
15. 实现大文件上传和断点续传功能，支持 100GB 以上文件的可靠上传。使用 WebWorker 实现文件切片和 MD5 计算，优化上传性能。开发文件预览组件，支持 50+ 种文件格式的在线预览。实现文件在线编辑和协同工作功能。
16. 设计并实现微前端架构，使用 qiankun 框架集成 5+ 个子应用。实现应用间的样式隔离和运行时隔离。开发应用通信机制，支持跨应用的状态共享和事件派发。实现子应用的按需加载和预加载，优化多应用场景下的性能。
17. 开发自定义表单设计器，支持 30+ 种表单控件的拖拽式布局。实现表单验证、联动和计算公式等高级功能。开发表单渲染引擎，支持 JSON 配置的动态表单生成。实现表单数据的版本控制和差异对比功能。