微信：shanyue-bot | 18334567890 | me@shanyue.tech | shfshanyue | https://shanyue.tech
技术栈: vue/pinia/vue-router/radix-vue/axios/echarts/sass/webpack/docker
职责以及难点:
Vue3 Composition API 重构 50,000+ 行 legacy 代码，将 80% 的组件改造为组合式函数。实现逻辑复用率提升 30%，代码行数减少 20%。重构过程中，设计并实现 15+ 个通用的组合式函数，如 useForm, useTable 等，显著提高代码可维护性和复用性。编写详细的迁移文档和最佳实践指南。ECharts 绘制 10+ 类型的高级图表，如桑基图、热力图等。优化大数据量 (10 万+ 数据点) 下的渲染性能，实现 60fps 的流畅交互。集成 WebSocket，支持毫秒级的实时数据更新。IntersectionObserver 的虚拟滚动，支持 10 万+ 行数据的流畅滚动。实现分片渲染和懒加载，优化 DOM 操作。使用 Web Worker 进行大数据的前端处理，提升响应速度。Jest 进行单元测试，实现 80% 的代码覆盖率。使用 Cypress 进行 E2E 测试，覆盖核心业务流程的 50+ 测试用例。实现组件快照测试，保证 UI 一致性。集成 Codecov 进行代码覆盖率分析。在 CI/CD 流程中自动运行测试，每次提交平均减少 5 个潜在 bug。Webpack 优化打包构建流程，将构建时间从 10 分钟减少到 2 分钟，生产环境打包大小减少 40%。实现代码分割和懒加载，首屏加载时间减少 50%。配置多环境构建，支持开发、测试、预发布和生产环境。实现热模块替换 (HMR)，提升开发效率。Pinia 的状态管理方案，重构全局状态，将状态管理代码减少 30%。实现 20+ Store 模块，处理复杂的应用状态。集成持久化插件，优化用户体验。实现基于 Proxy 的响应式状态追踪，提供准确的性能分析。编写 Pinia 最佳实践文档。Vue Router 实现复杂的路由管理，支持 50+ 动态路由和嵌套路由。实现路由级别的代码分割和预加载，优化页面切换性能。集成路由守卫，实现全局的权限控制和路由拦截。开发路由缓存机制，优化多标签页应用的内存占用和性能。Radix Vue 开发 30+ 无障碍的 UI 组件，提高应用的可访问性 (WCAG 2.1 AA 级)。实现键盘导航和屏幕阅读器支持。开发主题系统，支持 10+ 预设主题和动态主题切换。使用 CSS 变量实现高效的样式覆盖和定制。Axios 封装 HTTP 请求库，实现请求/响应拦截、错误处理和重试机制。集成 JWT 认证，处理 token 刷新和失效场景。实现请求缓存和并发控制，减少 50% 不必要的 API 调用。开发 Mock 服务，支持离线开发和测试。i18n) 解决方案，支持 10+ 语言的动态切换。使用 vue-i18n 管理翻译，实现懒加载语言包。开发翻译管理工具，支持在线编辑和自动翻译集成。实现 RTL 布局支持，适配阿拉伯语等从右到左的语言。Web Vitals) 采集，实现实时性能监控。开发错误聚合和分析面板，支持源码映射和错误重现。实现用户行为跟踪，辅助问题定位和分析。Service Worker 缓存静态资源，实现离线访问能力。优化字体加载，实现字体分片和预加载。SSO) 解决方案，提升多系统间的用户体验。WebWorker 实现文件切片和 MD5 计算，优化上传性能。开发文件预览组件，支持 50+ 种文件格式的在线预览。实现文件在线编辑和协同工作功能。qiankun 框架集成 5+ 个子应用。实现应用间的样式隔离和运行时隔离。开发应用通信机制，支持跨应用的状态共享和事件派发。实现子应用的按需加载和预加载，优化多应用场景下的性能。