DEV Community

Gaurav Rawat
Gaurav Rawat

Posted on

How to Reduce the Bundle Size of CodePush Updates (Safely)

#reactnative #codepush #ota

How We Reduced CodePush Bundle Size (Without Risky Changes)

If you're using CodePush Standalone for React Native apps, you’ve probably run into this problem at some point:

Your OTA update suddenly becomes way bigger than expected.

Large bundles mean:

  • slower downloads
  • more data usage for users
  • higher chances that users skip the update

The tricky part is that many optimization guides suggest complex solutions like aggressive code splitting or architectural changes. Those can work, but they also increase the chance of breaking things.

In this post, I’ll walk through practical and low-risk ways to reduce CodePush bundle size. These are simple improvements you can apply without restructuring your app.

1. Make Sure You're Building a Production Bundle

This sounds obvious, but it’s surprisingly easy to accidentally generate a development bundle.

Development bundles include:

  • debugging helpers
  • extra warnings
  • unoptimized code

All of that increases the bundle size.

Always generate your bundle with production settings:

react-native bundle \
  --platform android \
  --dev false \
  --entry-file index.js \
  --bundle-output build/index.android.bundle
Enter fullscreen mode Exit fullscreen mode

Setting --dev false removes development-only code and produces a much smaller bundle.

2. Enable Minification

Minification removes unnecessary things from your code such as:

  • whitespace
  • comments
  • long variable names

The functionality stays the same, but the file size becomes smaller.

When generating your bundle, make sure minification is enabled:

react-native bundle \
  --platform ios \
  --dev false \
  --entry-file index.js \
  --bundle-output build/main.jsbundle \
  --minify true
Enter fullscreen mode Exit fullscreen mode

In many projects this alone can reduce bundle size by 20–30%.

3. Remove Dependencies You Don’t Actually Use

Over time, most projects accumulate dependencies that are no longer needed.

Maybe a library was used for a feature that got removed. Maybe it was added for experimentation and never cleaned up.

Even a single unused package can add hundreds of KB to your bundle.

A quick way to check is:

npx depcheck
Enter fullscreen mode Exit fullscreen mode

If something shows up as unused, remove it and regenerate the bundle.

It’s one of the easiest wins for reducing bundle size.

4. Import Only What You Need

Large utility libraries can accidentally inflate your bundle if you import them incorrectly.

For example:

import _ from 'lodash'
Enter fullscreen mode Exit fullscreen mode

This pulls in the entire library, even if you only need one function.

Instead, import just what you need:

import debounce from 'lodash/debounce'
Enter fullscreen mode Exit fullscreen mode

Small change, but it prevents unnecessary code from ending up in your bundle.

5. Be Careful With Heavy Libraries

Some libraries are just naturally large.

A common example is Moment.js. It’s convenient, but it significantly increases bundle size.

If bundle size becomes a concern, consider lighter alternatives like:

  • date-fns
  • dayjs

The same idea applies to other large packages. Sometimes switching to a smaller library can shave off a few hundred KB instantly.

6. Remove Console Logs From Production

Console logs are useful during development, but they shouldn’t ship to production.

Besides cluttering logs, they also increase the bundle size.

You can automatically remove them using a Babel plugin.

Install it:

npm install babel-plugin-transform-remove-console --save-dev
Enter fullscreen mode Exit fullscreen mode

Then add it to your Babel config:

plugins: ["transform-remove-console"]
Enter fullscreen mode Exit fullscreen mode

This strips console statements when building for production.

7. Clean Up Old Images and Assets

Assets can quietly become the largest part of a CodePush update.

Over time you might accumulate:

  • old icons
  • unused illustrations
  • duplicated images

It’s worth occasionally scanning your asset folders and deleting things that are no longer used.

This kind of cleanup is simple and completely safe, but it can noticeably reduce update size.

8. Compress Images Before Adding Them

Many images get committed directly from design tools without optimization.

That means they’re often much larger than they need to be.

Before adding images to the project, run them through a compressor such as:

  • TinyPNG
  • ImageOptim

You’ll usually reduce image size without any visible quality loss.

For apps that ship lots of illustrations or icons, this can make a big difference.

9. Watch Out for Large JSON Files

Another hidden bundle-size issue is large static JSON files.

Examples include:

  • country lists
  • configuration datasets
  • static content

If these files are large, they get bundled directly into your JavaScript.

Instead of bundling them, consider loading them from an API or remote endpoint when needed.

That keeps the CodePush update lightweight.

10. Check Bundle Size Once in a While

Bundle size tends to grow slowly as features get added.

Running a bundle analyzer occasionally helps you catch issues early.

For example:

npx source-map-explorer index.android.bundle
Enter fullscreen mode Exit fullscreen mode

This shows which dependencies contribute the most to the bundle size.

Sometimes you’ll immediately spot a library that’s much heavier than expected.

Final Thoughts

Reducing CodePush bundle size doesn’t have to involve complicated optimizations.

Most improvements come from simple habits:

  • building production bundles
  • removing unused dependencies
  • importing libraries correctly
  • compressing assets
  • keeping the project clean

None of these changes are risky, and they’re easy to maintain as the project grows.

If you apply even a few of them, you’ll likely end up with smaller OTA updates and faster downloads for your users.

Top comments (0)