Univer项目代码体积优化实践与思考

背景介绍

Univer作为一款开源的企业级表格解决方案，其功能日益丰富的同时，代码体积也随之增长。从0.4.x版本的约5MB增长到0.5.4版本时已经翻倍，这给前端性能优化带来了新的挑战。

问题分析

在Univer 0.5.4版本中，当开发者使用预设(presets)方式引入核心功能时，打包后的代码体积显著增大。这主要是因为presets作为插件集合，包含了大量功能模块，而默认的打包配置未能对这些模块进行合理的代码分割。

解决方案

1. 基础配置方案

通过Vite的rollup配置，我们可以实现基本的手动代码分割：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          return matchChunk(id, [
            ['@univerjs', 'univer'],
            ['rxjs', 'rxjs'],
            ['vue', 'vue'],
            ['react', 'react'],
            ['scheduler', 'scheduler']
          ])
        }
      }
    }
  }
})

这种配置虽然简单，但将所有Univer相关代码打包到一个chunk中，优化效果有限。

2. 精细化分割方案

更优的做法是对Univer的各功能模块进行精细化分割：

return matchChunk(id, [
  ['@univerjs/core', 'univercore'],
  ['@univerjs/design', 'univerdesign'],
  ['@univerjs/ui', 'univerui'],
  ['@univerjs/docs', 'univerdocs'],
  ['@univerjs/docs-ui', 'univerdocsui'],
  ['@univerjs/sheets', 'universheets'],
  ['@univerjs/sheets-ui', 'universheetsui'],
  // 其他Univer相关包
  ['rxjs', 'rxjs'],
  ['vue', 'vue'],
  ['react', 'react'],
  ['scheduler', 'scheduler']
])

这种方案的优势在于：

• 按功能模块划分，实现更细粒度的代码分割
• 利用浏览器并行加载能力提升加载速度
• 按需加载，减少首屏不必要的代码下载

实施效果

采用精细化分割方案后，可以观察到：

1. 主包体积显著减小
2. 各功能模块形成独立chunk
3. 依赖库如rxjs、react等也被合理分割
4. 整体加载性能得到提升

进阶优化建议

1. 动态导入：对于非关键功能，考虑使用动态导入实现按需加载
2. Tree Shaking：确保项目配置支持Tree Shaking，移除未使用代码
3. 依赖分析：使用分析工具(如rollup-plugin-visualizer)识别优化点
4. CDN加载：对稳定第三方库考虑使用CDN方式引入
5. 代码压缩：启用高级压缩选项如gzip/brotli

总结

Univer作为功能丰富的企业级解决方案，其代码体积优化需要开发者特别关注。通过合理的代码分割策略，我们可以在保持功能完整性的同时，显著提升应用加载性能。本文介绍的精细化分割方案为Univer项目提供了可行的优化路径，开发者可根据实际需求调整分割粒度，找到最适合自身项目的平衡点。