---
title: Package Size Optimization
docType: default
---

# Package Size Optimization

Package size directly affects miniapp download time. The larger the package, the longer the download time on first open and version updates. Controlling package size is one of the most effective strategies for startup performance optimization.

## Use Subpackage Loading

Subpackage loading is the most effective way to control startup package size. By splitting the miniapp into multiple subpackages, only the main package needs to be downloaded at startup; other subpackages are loaded on demand. [Subpackage Loading](/en/miniapp/develop/miniapp/guide/ability/sub-packages)

**Recommended for**: Projects with a package size exceeding 2MB

### Optimization Tips

- Place **pages not needed at startup** into subpackages
- Keep only necessary shared resources and startup pages in the main package
- Plan subpackage structure carefully to avoid any single subpackage becoming too large

## Remove Unused Code and Assets

As projects iterate, packages may accumulate large amounts of unused code and resource files.

### How to Identify

1. **Check unreferenced pages**: Pages registered in `app.json` but not actually used
2. **Check unreferenced components**: Custom components declared in JSON but not used
3. **Check unreferenced assets**: Images, fonts, and other files in the project that are not referenced
4. **Check unused dependencies**: npm packages installed in `package.json` but not used

## Image and Asset Optimization

Images and assets are typically the biggest contributors to package size.

### Upload Images to CDN

Upload static assets (images, audio, etc.) to CDN. At runtime they are automatically replaced with CDN URLs, reducing package size. [Tuya CDN Guide](/en/miniapp/develop/miniapp/guide/cdn/tuya_cdn).

### Image Compression

If local images must be used:

- Use appropriate formats
- Avoid base64 inlining of large assets
- Compress images with tools like [Tinypng](https://tinypng.com/)
- Control image dimensions; avoid loading images larger than needed for display

## Dependency Selection and Import

Pay attention to package size when choosing dependencies:

```javascript
// Recommended: lightweight utility library
import dayjs from 'dayjs'; // ~2KB

// Avoid: heavyweight library
import moment from 'moment'; // ~70KB
```

For libraries that support tree-shaking, avoid importing everything:

```javascript
// Recommended: import on demand
import debounce from 'lodash/debounce';

// Avoid: full import
import { debounce } from 'lodash';
```

## Checklist

| Check Item | Optimization |
| ---------- | ------------ |
| Package size exceeds 2MB | Use subpackage loading; only download main package at startup |
| Unused dependencies, components, or assets | Regularly review code and remove unused items |
| Large third-party libraries | Replace with lightweight alternatives or use on-demand imports |
| Local image assets | Upload to CDN or compress before referencing |