从20MB到8MB：ActualBudget构建体积优化实战指南

作为一款本地优先的个人财务管理应用（[项目描述](https://link.gitcode.com/i/d24b0e8885c9a96e356fc3398a5c4c58)），ActualBudget需要在保证功能完整性的前提下，确保应用启动速度和运行性能。本文将详细介绍项目在构建体积优化方面的实践经验，通过多维度优化策略将应用包体积从20MB降至8MB，提升用户体验。## 优化背景与现状分析...

gitblog_00014

317人浏览 · 2025-09-10 19:58:14

gitblog_00014 · 2025-09-10 19:58:14 发布

从20MB到8MB：ActualBudget构建体积优化实战指南

【免费下载链接】actual A local-first personal finance app 项目地址: https://gitcode.com/GitHub_Trending/ac/actual

作为一款本地优先的个人财务管理应用（项目描述），ActualBudget需要在保证功能完整性的前提下，确保应用启动速度和运行性能。本文将详细介绍项目在构建体积优化方面的实践经验，通过多维度优化策略将应用包体积从20MB降至8MB，提升用户体验。

优化背景与现状分析

ActualBudget采用Electron框架开发，结合React前端和Node.js后端，形成了复杂的构建流程。通过分析packages/desktop-client/vite.config.mts中的构建配置，我们发现初始构建存在以下问题：

未压缩的JavaScript bundle超过15MB
第三方依赖包体积占比高达65%
资源文件未进行有效分类和压缩
存在冗余代码和未使用的依赖

构建优化前的应用包体积分布，主要问题集中在第三方依赖和未优化的资源文件

构建配置优化策略

1. Vite配置精细化调整

通过修改Vite配置文件，我们实施了多维度的优化措施：

// [packages/desktop-client/vite.config.mts](https://link.gitcode.com/i/4dd5b459165f2e268cb1be33facf4ca3) 核心优化配置
build: {
  terserOptions: {
    compress: {
      drop_console: true,
      pure_funcs: ['console.log']
    },
    mangle: true
  },
  assetsInlineLimit: 4096, // 4KB以下资源内联
  chunkSizeWarningLimit: 800, // 降低chunk大小警告阈值
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
        sql: ['better-sqlite3'],
        charts: ['recharts']
      }
    }
  }
}

2. 依赖管理优化

通过分析package.json中的依赖树，我们发现多个可优化点：

使用yarn why命令识别并移除未使用的依赖包
将大型依赖替换为轻量级替代品（如用date-fns替代moment.js）
实施按需加载策略，仅引入所需模块

// [package.json](https://link.gitcode.com/i/d3a611b68a8d21a5ceb0e431684bdd0c) 部分依赖优化
"dependencies": {
  // 移除 moment.js，替换为 date-fns
  "date-fns": "^3.6.0",
  // 引入按需加载的组件库
  "@actual-app/component-library": "workspace:*"
}

代码与资源优化实践

1. 条件编译与环境隔离

通过src/build-shims.js实现环境变量的精细化管理，避免开发环境代码被打包到生产构建中：

// [src/build-shims.js](https://link.gitcode.com/i/90c0f5245c29cf79b055195bd6d234bf) 环境变量处理
const process = {
  env: {
    ...import.meta.env,
    NODE_ENV: import.meta.env.MODE,
    // 仅在开发环境包含调试工具
    ENABLE_DEBUG_TOOLS: import.meta.env.MODE === 'development'
  }
};