react-native-appsize-reducer

Reduce React Native app size with a three-step pipeline:

1. unused – find and remove unused image assets
2. convert – convert PNG/JPEG → WebP and update require() in JS/TS (.js, .jsx, .ts, .tsx)
3. compress – safely compress PNG/JPEG/WebP in place

Skips node_modules automatically.

Install (as a dev dependency)

# npm
npm install --save-dev react-native-appsize-reducer

# yarn
yarn add --dev react-native-appsize-reducer

# pnpm
pnpm add -D react-native-appsize-reducer

# or run without installing
npx react-native-appsize-reducer

Commands

| Command | Description | |--------|-------------| | (default) / all | Full pipeline: 1) remove unused assets 2) convert PNG/JPEG → WebP 3) compress images → overall summary | | convert | Convert only: PNG/JPEG → WebP, optional remove + update require() (no compress) | | compress | Compress only: compress PNG/JPEG/WebP in place (no format change) | | unused | Unused only: find (and optionally delete) unused image assets |

What each command does

• all (default)

  1. Scan src for image imports/requires and src/assets for PNG/JPEG/WebP
  2. Remove image files in assets that are never referenced in code (unless --no-remove / --dry-run)
  3. Convert remaining PNG/JPEG to WebP (quality 90), delete originals (unless --no-remove)
  4. Replace require('...png'/'...jpg'/'...jpeg') with require('...webp') in src only for images that were actually converted
  5. Compress PNG/JPEG/WebP in src/assets in place
  6. Print an overall table: Unused → Convert → Compress with before/after/saved MB

• Convert (convert)

  • Only steps 3–4 above (no unused scan, no compress).

• Compress (compress)

  • Only step 5 above.

• Unused (unused)

  • Find image files in src/assets that are never imported/required from src.
  • By default, deletes them; use --no-remove or --dry-run to keep them and only list/preview.

No negative impact

• Convert: If WebP would be larger than the original, the tool skips conversion and tries to compress the original in place. If that compression would also make the file larger, it skips and leaves the file unchanged, logging the reason. Already-WebP images are also detected and logged as “no conversion needed”.
• Compress: If compressing a file would make it larger, the tool skips it and leaves it unchanged, with a log like Skipped (compression would be larger: X KB → Y KB); left unchanged.
  Summaries only count real reductions: size reduction and percent are never negative.

Usage

From your project root:

# 1) Full pipeline: unused → convert → compress + overall summary
npx react-native-appsize-reducer
# or
npx appsize-reducer
# or explicitly
npx appsize-reducer all

# 2) Convert only (PNG/JPEG → WebP, update require)
npx appsize-reducer convert

# 3) Compress only
npx appsize-reducer compress

# 4) Unused only (list + optional delete)
npx appsize-reducer unused

Options (all / convert)

| Option | Default | Description | |--------|---------|-------------| | --dir <path> | src/assets | Assets directory | | --src <path> | src | Source directory for require() / import updates & unused detection | | --quality <1-100> | 90 | WebP quality for conversion & JPEG quality for compress-instead | | --no-remove | - | Do not delete originals after converting (and for unused, do not delete unused files) | | --no-update | - | Do not update require() in source | | --dry-run | - | Log only, do not write/delete files |

Options (compress)

| Option | Default | Description | |--------|---------|-------------| | --dir <path> | src/assets | Directory to compress | | --quality <1-100> | 90 | JPEG/WebP quality | | --max-width <n> | - | Resize to fit width | | --max-height <n> | - | Resize to fit height | | --dry-run | - | Log only |

Options (unused)

| Option | Default | Description | |--------|---------|-------------| | --dir <path> | src/assets | Assets directory to scan for images | | --src <path> | src | Source directory to scan for require() / import usage | | --no-remove | - | Only list unused assets, do not delete them | | --dry-run | - | Preview only (shows what would be deleted) |

Examples

# Full pipeline with custom quality
npx appsize-reducer all --quality 95

# Convert only, keep originals and do not update code
npx appsize-reducer convert --no-remove --no-update

# Compress only
npx appsize-reducer compress

# Compress with resize
npx appsize-reducer compress --max-width 1200 --max-height 1200 --quality 75

# List unused image assets without deleting
npx appsize-reducer unused --no-remove

# Preview full pipeline (no deletions/writes)
npx appsize-reducer all --dry-run

Package scripts

In your app’s package.json:

{
  "scripts": {
    "appsize:all": "appsize-reducer all",
    "appsize:convert": "appsize-reducer convert",
    "appsize:compress": "appsize-reducer compress",
    "appsize:unused": "appsize-reducer unused"
  }
}

Then run:

• npm run appsize:all – full pipeline (unused → convert → compress + overall summary)
• npm run appsize:convert – convert only
• npm run appsize:compress – compress only
• npm run appsize:unused – unused only

License

MIT