乐读课堂学生端

项目概述

乐读优课桌面客户端是好未来教育的核心产品，服务 30 万+ 学生终端。作为该项目前端开发者，我主导了整个项目的技术架构升级和性能优化。

核心成就

🚀 构建工具迁移

• 问题: Webpack 构建慢，开发体验差
• 方案: 迁移到 Rspack，配置渐进式升级策略
• 结果: 启动速度提升 10×，构建时长减少 60%

🎯 播放器模块重构

• 背景: 原有播放器与业务逻辑强耦合，难以维护
• 实施: 抽象播放器核心逻辑，建立事件驱动架构
• 效果: 业务耦合减少 50%，互动弹窗响应提升 70%

⚡ 动画性能优化

• 痛点: Lottie 动画首帧加载慢，影响用户体验
• 优化: 实现懒加载策略 + 预渲染机制
• 成果: 首帧时间缩短 90%

技术亮点

Rspack 迁移策略

// rspack.config.js - 渐进式迁移配置
module.exports = {
  entry: './src/main.js',
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  experiments: {
    rspackFuture: {
      newTreeshaking: true,
    },
  },
}

播放器架构设计

• 事件总线: 解耦播放器与业务逻辑
• 状态管理: 统一播放状态的管理和同步
• 插件系统: 支持动态加载互动组件

技术栈

• 框架: Vue 2.7 + Vue Router + Vuex
• 构建: Rspack + TypeScript
• 动画: Lottie + CSS3 Animations
• 监控: Sentry + 自研埋点系统
• 桌面: Electron + XBase 框架

影响与收益

• 开发效率: 构建时间减少 60%，开发体验显著提升
• 用户体验: 动画加载优化，页面响应更流畅
• 维护成本: 代码耦合度降低，新功能开发周期缩短 30%
• 稳定性: 线上异常排查速率上升

技术挑战与解决

兼容性问题

Vue 2.7 升级过程中遇到的依赖兼容问题，通过渐进式升级和回退机制解决。

性能瓶颈

大量 Lottie 动画导致的内存泄漏，通过对象池和主动释放机制优化。

监控盲区

复杂的桌面应用场景下，建立了多层次的错误捕获和上报机制。