---
title: 代码包体积优化
summary: "介绍代码包体积优化方法，包括分包加载、移除无用代码和资源、图片上传 CDN 及依赖精简。"
docType: default
questions:
  - 代码包体积为什么会影响小程序启动性能？
  - 分包加载适合什么场景的项目？
  - 分包加载时启动只需下载什么内容？
  - 如何排查项目中未引用的页面和组件？
  - 为什么建议将图片等静态资源上传到 CDN？
  - 本地图片应该使用什么格式以减小体积？
  - 选择第三方依赖包时应该关注什么？
  - 为什么推荐按需引入而不是全量导入依赖库？
  - 主包中应该保留哪些内容？
  - 有哪些方法可以压缩本地图片资源？
---

# 代码包体积优化

代码包体积直接影响小程序的下载耗时。体积越大，首次打开和版本更新时的下载时间越长。控制代码包体积是启动性能优化中最有效的手段之一。

## 使用分包加载

分包加载是控制启动时代码包体积最有效的方式。通过将小程序拆分为多个分包，启动时只需下载主包，其他分包在需要时再按需加载。[分包加载](/cn/miniapp/develop/miniapp/guide/ability/sub-packages)

**适合场景**：包大小超过 2M 的项目

### 优化建议

- 将**启动不需要的页面**放入分包
- 主包只保留必要的公共资源和启动页面
- 合理规划分包结构，避免单个分包过大

## 移除无用代码和资源

随着项目迭代，代码包中可能积累了大量不再使用的代码和资源文件。

### 排查方法

1. **检查未引用的页面**：`app.json` 中注册但实际未使用的页面
2. **检查未引用的组件**：JSON 中声明但未使用的自定义组件
3. **检查未引用的资源**：项目中存在但没有被引用的图片、字体等文件
4. **检查未使用的依赖**：`package.json` 中安装但未使用的 npm 包

## 图片和资源优化

图片和资源文件通常是代码包体积的大头。

### 图片上传到 CDN

开发者可以将项目中的静态资源（如图片、音频等）上传到 CDN，运行时会自动替换为对应的 CDN 地址，减少图片体积占用。[涂鸦 CDN 使用指南](/cn/miniapp/develop/miniapp/guide/cdn/tuya_cdn)。

### 图片压缩

如果必须使用本地图片，建议：

- 使用合适的图片格式
- 避免 base64 内联大资源
- 使用工具压缩图片（如 [Tinypng](https://tinypng.com/)）
- 控制图片尺寸，避免使用超出显示需要的大尺寸图片

## 对依赖的选择和引入

选择依赖包时，关注包的体积大小：

```javascript
// 推荐：使用轻量工具库
import dayjs from 'dayjs'; // ~2KB

// 避免：使用重量级库
import moment from 'moment'; // ~70KB
```

对于支持按需引入的库，避免全量导入：

```javascript
// 推荐：按需引入
import debounce from 'lodash/debounce';

// 避免：全量引入
import { debounce } from 'lodash';
```

## 检查清单

| 检查项 | 优化方法 |
| ------ | -------- |
| 包体积是否超过 2MB | 使用分包加载，启动时只下载主包 |
| 是否有未引用的依赖、组件、资源 | 定期 CR，排查并删除无用代码 |
| 是否引入了体积过大的第三方库 | 替换为轻量库，或使用按需引入 |
| 是否有本地图片资源 | 上传到 CDN/压缩后引用 |