DEV Community: Gaurav Rawat

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

Gaurav Rawat — Sat, 14 Mar 2026 13:55:59 +0000

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

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

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

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'

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

Instead, import just what you need:

import debounce from 'lodash/debounce'

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

Then add it to your Babel config:

plugins: ["transform-remove-console"]

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

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.

📏 Guide CursorAI with a `.prompt-rules.md` File

Gaurav Rawat — Fri, 05 Sep 2025 07:31:28 +0000

CursorAI is smart, but sometimes its code suggestions don’t match your style or team standards. Until built-in rule enforcement arrives, there’s a simple manual workaround: use a project-level rules file.

🛠️ The Workaround: Add a Contextual Rules File

CursorAI reads your codebase for context—including documentation. You can guide its behavior by adding a Markdown file (e.g. .prompt-rules.md) in your project root.

📁 Step-by-Step

1. Create `.prompt-rules.md`

Place this in your project root (next to package.json, README.md, etc.).

2. Add Your Coding Guidelines

Write clear, readable rules—like you're instructing a teammate.

Example:

# CursorAI Prompt Rules

1. Use TypeScript with strict typing.
2. React components must be functional.
3. No `any`; use union types or generics.
4. Prefer async/await over Promises.
5. Follow Airbnb JavaScript Style Guide.
6. Add inline comments for complex logic.
7. Avoid inline CSS—use styled-components.
8. Keep functions under 40 lines.

✅ Why It Works

CursorAI scans all project files for context.

It uses this file as silent guidance.

Works for suggestions, explanations, and refactors.

🚫 Limitations

Not strict enforcement (like ESLint).

Doesn’t reject rule-breaking suggestions.

Requires you to maintain it.

📌 TL;DR

Drop a .prompt-rules.md in your project with your coding standards. CursorAI will read it and tailor suggestions accordingly.

Simple. Effective. No plugins needed.

🧠 Cursor vs Copilot vs Codeium vs Tabnine vs CodeWhisperer: Best AI Tools for Developers in 2025

Gaurav Rawat — Sat, 16 Aug 2025 14:55:33 +0000

AI has transformed the way we code — whether you’re writing boilerplate, refactoring logic, or debugging across large codebases. But with so many tools out there, the real question is:

Which AI coding assistant is the best for you?

In this post, we’ll break down the five most popular AI coding tools today:

Cursor
GitHub Copilot
Codeium
Tabnine
Amazon CodeWhisperer

We’ll go over their advantages, drawbacks, and how they compare against each other, so you can make the best decision for your stack, budget, and workflow.

🖋️ 1. Cursor – The AI-Powered Code Editor

Think: ChatGPT + VS Code in one seamless experience.

✅ Advantages:

Full project awareness: Cursor indexes your entire codebase and understands relationships between files.
Inline AI refactoring: Select code and say “optimize this” or “convert to async” — it just works.
Minimal learning curve: Built on top of VS Code, so it’s familiar and developer-friendly.
Conversational UI: You can “chat with your code” in a way that feels natural and context-rich.

❌ Drawbacks:

Not open-source: Unlike VS Code, you’re locked into their ecosystem.
Paid tool: No fully free version (free trial only).
Still new: Some features can feel experimental or less stable with large monorepos.

🔄 vs Others:

Beats Copilot in file-level awareness and refactoring tools.
Cleaner and faster than Codeium’s editor integration.
More interactive than Tabnine or CodeWhisperer, especially for solo developers.

🤖 2. GitHub Copilot – The Fast Typist

Think: Autocomplete on steroids.

✅ Advantages:

Lightning-fast inline suggestions: It’s like the AI finishes your thoughts as you type.
Deep GitHub integration: Trained on public GitHub repos, it understands common code patterns and libraries.
Works in multiple IDEs: VS Code, JetBrains, Neovim, CLI.

❌ Drawbacks:

Limited context: It doesn’t truly understand your whole codebase or file relationships.
No true "chat" interaction in the base product (Copilot Chat is separate and in beta).
Subscription required after trial (~$10–$19/month).

🔄 vs Others:

Beats Tabnine in code intelligence and speed.
Faster than Cursor, but less context-aware.
Less powerful than Codeium in chat, but better inline suggestions.

⚡ 3. Codeium – The Free Alternative

Think: A decent Copilot replacement that won’t cost you a dime.

✅ Advantages:

Completely free for individuals: No hidden costs or usage caps.
Supports chat + inline suggestions: You get both conversational and autocomplete features.
Wide IDE support: JetBrains, VS Code, Vim, Jupyter, and more.
Customizable models: You can bring your own AI backend if needed.

❌ Drawbacks:

Lacks deep codebase understanding: Doesn’t match Cursor’s file/project awareness.
Suggestions feel weaker: Especially in larger or more abstract projects.
UI/UX isn’t as polished as Copilot or Cursor.

🔄 vs Others:

Beats Copilot on pricing, but not on accuracy or speed.
Falls behind Cursor in project-wide reasoning.
More flexible than Tabnine for solo devs and hobbyists.

🔐 4. Tabnine – Enterprise-Ready AI

Think: Secure, AI-powered coding for serious teams.

✅ Advantages:

Privacy-first: You can host it on-premise, and it doesn’t share code with third parties.
Team training: You can fine-tune it on your company’s codebase.
Works offline: Great for regulated industries or secure apps.

❌ Drawbacks:

Not very "smart" out of the box: Code suggestions aren’t as clever as Copilot or Cursor.
Not aimed at individuals: The free version is underwhelming for solo use.
Clunky setup for some IDEs.

🔄 vs Others:

Beats everyone in enterprise-grade security.
Falls behind Copilot and Cursor in terms of raw intelligence.
Not as conversational as Cursor or Codeium.

☁️ 5. Amazon CodeWhisperer – AWS-Powered Assistant

Think: Autocomplete with a cloud bias.

✅ Advantages:

Great for AWS devs: It recognizes AWS SDK patterns and writes boilerplate for you.
Free for individuals: No subscription needed.
Built-in security scanning: Can detect hardcoded secrets or risky patterns.

❌ Drawbacks:

Very AWS-centric: Not super helpful if you’re building outside of the AWS ecosystem.
Less intelligent overall: Suggestions are more boilerplate than clever.
No project-level chat or interaction.

🔄 vs Others:

Beats Copilot and Cursor for AWS-heavy projects.
Falls behind everyone in flexibility and general code intelligence.
Great second assistant, not a primary one.

📊 Final Comparison

Tool	Context Awareness	Chat UI	Inline Suggestions	Free Plan	Best For
Cursor	✅ Full	✅ Yes	✅ Yes	❌ Trial Only	Full-stack devs, refactoring
Copilot	⚠️ Limited	⚠️ Labs	✅ Yes	❌	Speed-focused devs
Codeium	⚠️ Partial	✅ Yes	✅ Yes	✅ Yes	Freelancers, students
Tabnine	⚠️ Minimal	❌ No	✅ Yes	✅ (Limited)	Enterprises, security focus
CodeWhisperer	⚠️ AWS-focused	❌ No	✅ Yes	✅ Yes	AWS developers

🏁 Conclusion: Which One Should You Use?

Choose Cursor if you want a smart, interactive AI assistant that understands your whole codebase.
Use Copilot if speed and autocomplete are your priorities, and you don’t mind paying.
Try Codeium if you’re on a budget but still want both chat + suggestions.
Pick Tabnine if privacy and security are essential — especially in team environments.
Go with CodeWhisperer if you’re deep into AWS development and want relevant code quickly.

Shared Animation in React Native with Reanimated

Gaurav Rawat — Sun, 08 Oct 2023 07:13:51 +0000

Note: Before we begin, I would like to tell you that this feature is an experimental feature and is not yet recommended for production use.

Intro
We’ll be creating a simple shared animation between two screens.

A preview of what we will be doing in the tutorial

We will start with creating a project and installing the required libraries.

Create the project

npx react-native init SharedTransition

Install the required libraries

yarn add react-native-reanimated
yarn add @react-navigation/native       
yarn add @react-navigation/native-stack  
yarn add react-native-screens            
yarn add react-native-safe-area-context

Note: Shared Element Transitions only work with the native stack navigator (react-native-screens).

Lets start with the coding part.

1) Create a file and write the navigation this will be your initial file.

import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import Home from './screens/Home'
import DetailScreen from './screens/DetailScreen'

const Stack = createNativeStackNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="DetailScreen" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

As visible in our code, we have used Stack Navigator and added two components to the stack namely Home & DetailScreen.

2) Let's start working on the screens, We will start with Home

import React from 'react';
import {View, Button} from 'react-native';
import Animated from 'react-native-reanimated';

export default function Home({navigation}) {
  return (
    <View style={{flex: 1}}>
      <View style={{width: 150, height: 150}}>
        <Animated.Image
          source={{
            uri: 'https://fastly.picsum.photos/id/379/200/300.jpg?hmac=IEcRQyv-DIaRsldE8jIdMRW5IHCTyemefU-bbCJpY34',
          }}
          sharedTransitionTag="sharedTag"
          style={{width: 150, height: 150}}
        />
      </View>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('DetailScreen')}
      />
    </View>
  );
}

We created an Animated.View (from react-native-reanimated), and give it a sharedTransitionTag.
sharedTransitionTag is the prop used by the Reanimated library to connect elements between the screens.

3) Let's create DetailScreen where the user will be navigated to.

import React from 'react';
import {View, Button} from 'react-native';
import Animated from 'react-native-reanimated';

export default function DetailScreen({navigation}) {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <View style={{width: 100, height: 100}}>
        <Animated.Image
          source={{
            uri: 'https://fastly.picsum.photos/id/379/200/300.jpg?hmac=IEcRQyv-DIaRsldE8jIdMRW5IHCTyemefU-bbCJpY34',
          }}
          sharedTransitionTag="sharedTag"
          style={{width: 100, height: 100}}
        />
      </View>
      <Button title="Go back" onPress={() => navigation.navigate('Home')} />
    </View>
  );
}

Please note, Do not import Animated from react-native else this will not work.

DEV Community: Gaurav Rawat

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

How We Reduced CodePush Bundle Size (Without Risky Changes)

1. Make Sure You're Building a Production Bundle

2. Enable Minification

3. Remove Dependencies You Don’t Actually Use

4. Import Only What You Need

5. Be Careful With Heavy Libraries

6. Remove Console Logs From Production

7. Clean Up Old Images and Assets

8. Compress Images Before Adding Them

9. Watch Out for Large JSON Files

10. Check Bundle Size Once in a While

Final Thoughts

📏 Guide CursorAI with a `.prompt-rules.md` File

🛠️ The Workaround: Add a Contextual Rules File

📁 Step-by-Step

1. Create .prompt-rules.md

2. Add Your Coding Guidelines

🧠 Cursor vs Copilot vs Codeium vs Tabnine vs CodeWhisperer: Best AI Tools for Developers in 2025

🖋️ 1. Cursor – The AI-Powered Code Editor

✅ Advantages:

❌ Drawbacks:

🔄 vs Others:

🤖 2. GitHub Copilot – The Fast Typist

✅ Advantages:

❌ Drawbacks:

🔄 vs Others:

⚡ 3. Codeium – The Free Alternative

✅ Advantages:

❌ Drawbacks:

🔄 vs Others:

🔐 4. Tabnine – Enterprise-Ready AI

✅ Advantages:

❌ Drawbacks:

🔄 vs Others:

☁️ 5. Amazon CodeWhisperer – AWS-Powered Assistant

✅ Advantages:

❌ Drawbacks:

🔄 vs Others:

📊 Final Comparison

🏁 Conclusion: Which One Should You Use?

Shared Animation in React Native with Reanimated

1. Create `.prompt-rules.md`