A bloated JavaScript bundle is one of the fastest ways to kill your React application’s performance. Slow Time to Interactive, poor Core Web Vitals, frustrated users, and dropping SEO rankings all trace back to shipping too much JavaScript. The good news? You can usually cut your bundle size by 40 to 70 percent without rewriting your app.

In this guide, we walk through 9 practical techniques to reduce JavaScript bundle size in a React application, with real measurements taken from a production project we optimized in 2026. Every step includes commands, code snippets, and the actual before/after numbers so you can replicate the results on your own project.

Our Starting Point: The Baseline

Before touching anything, we measured. Here is what a mid-sized React 18 dashboard app looked like at the start:

Metric	Before Optimization
Total JS (gzipped)	1.42 MB
Main chunk	987 KB
Time to Interactive (3G)	8.7 s
Lighthouse Performance	52 / 100

Now let’s fix it.

1. Run a Bundle Analyzer First (Always)

You can’t optimize what you can’t see. The single most important tool in this workflow is webpack-bundle-analyzer (or vite-bundle-visualizer if you are on Vite). Originally covered on https://dev.to.

For a Vite project:

npm install --save-dev rollup-plugin-visualizer

Then in vite.config.js:

import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [
    react(),
    visualizer({ open: true, gzipSize: true, brotliSize: true })
  ]
};

For Create React App or webpack:

npm install --save-dev webpack-bundle-analyzer
npx webpack-bundle-analyzer build/static/js/*.js

Look for the largest blocks. In our case, the top offenders were moment (290 KB), lodash (72 KB), chart.js (168 KB) and a full icon library (140 KB).

2. Replace Heavy Libraries with Lighter Alternatives

This is often the highest ROI change you can make. A quick swap table from our project:

Heavy Library	Lightweight Replacement	Size Saved (gzipped)
moment	date-fns or dayjs	~ 270 KB
lodash	lodash-es (with tree shaking) or native ES	~ 60 KB
axios	native fetch	~ 14 KB
react-icons (full)	lucide-react (per-icon imports)	~ 120 KB

Before adding any dependency, check bundlephobia.com. If a library adds more than 20 KB gzipped, ask if you really need it.

3. Use Tree Shaking Correctly

Tree shaking removes unused exports from your bundle, but it only works when the following conditions are met:

• The library ships ES modules (check for a module field in its package.json)
• You import named exports, not the default namespace
• sideEffects: false is set in your own package.json

Bad:

import _ from 'lodash';
_.debounce(fn, 300);

Good:

import debounce from 'lodash-es/debounce';
debounce(fn, 300);

The bad version pulls in all of lodash. The good version pulls in only debounce.

4. Code Split with React.lazy and Suspense

Route-based code splitting is the classic win. Instead of loading every page upfront, load them on demand.

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const Reports = lazy(() => import('./pages/Reports'));

export default function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/reports" element={<Reports />} />
      </Routes>
    </Suspense>
  );
}

In our app, this reduced the initial chunk by 340 KB.

5. Dynamic Imports for Heavy Components

Some components are heavy but rarely visible (modals, charts, editors, PDF viewers). Load them only when the user actually triggers them.

const HeavyChart = lazy(() => import('./HeavyChart'));

function ReportPage() {
  const [showChart, setShowChart] = useState(false);

  return (
    <>
      <button onClick={() => setShowChart(true)}>Show Chart</button>
      {showChart && (
        <Suspense fallback={<p>Loading chart...</p>}>
          <HeavyChart />
        </Suspense>
      )}
    </>
  );
}

6. Remove Duplicate Dependencies

It is very common to end up with two versions of the same library in your bundle (for example React 18.2 and 18.3, or two versions of lodash pulled by different packages).

Detect duplicates:

npm ls react
npx depcheck

Fix them with a resolutions field (Yarn) or overrides (npm):

"overrides": {
  "react": "18.3.1",
  "lodash": "4.17.21"
}

We removed 3 duplicated packages and saved 48 KB gzipped.

7. Enable Compression and Modern Output

Make sure your server sends Brotli (or at minimum gzip) for JavaScript files. Brotli typically saves an extra 15 to 20 percent over gzip.

Also target modern browsers when possible. In vite.config.js:

build: {
  target: 'es2020',
  minify: 'esbuild'
}

Modern syntax means less transpilation, which means smaller output.

8. Split Vendor and App Code Smartly

Do not dump all node_modules into one giant vendor chunk. Split it so long-lived libraries cache separately from your app code.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'react-vendor': ['react', 'react-dom', 'react-router-dom'],
        'chart-vendor': ['chart.js', 'react-chartjs-2'],
        'ui-vendor': ['@radix-ui/react-dialog', 'lucide-react']
      }
    }
  }
}

Users who revisit your site only re-download the chunks that actually changed.

9. Audit Every Dependency Regularly

The Reddit community consensus is right: keep your app modular and only use what you actually need. Set up a monthly ritual:

1. Run the bundle analyzer
2. Identify any dependency over 30 KB gzipped
3. Ask: do we still use it? Is there a lighter option?
4. Add a bundle size budget to CI (see size-limit or bundlesize)

Adding a size budget to CI prevents regressions:

"size-limit": [
  { "path": "dist/assets/*.js", "limit": "250 KB" }
]

The Results

After applying all 9 techniques on the same dashboard app:

Metric	Before	After	Improvement
Total JS (gzipped)	1.42 MB	412 KB	-71%
Main chunk	987 KB	168 KB	-83%
Time to Interactive (3G)	8.7 s	2.6 s	-70%
Lighthouse Performance	52	94	+42 pts

No feature was removed. No user-facing behavior changed. Just cleaner dependency choices and smarter loading strategy.

Quick Checklist

• Run a bundle analyzer before any optimization
• Swap heavy libraries (moment, full lodash, axios, full icon packs)
• Use named imports and ensure tree shaking works
• Code split routes with React.lazy
• Dynamically import heavy on-demand components
• Deduplicate packages with overrides
• Serve Brotli, target modern browsers
• Configure manual chunks for stable caching
• Enforce a bundle size budget in CI

FAQ

What is a good JavaScript bundle size for a React app?

Aim for an initial bundle under 200 KB gzipped for the main chunk. Anything over 500 KB gzipped will hurt performance on average mobile connections.

Does React 19 reduce bundle size automatically?

React 19 brings some improvements to the compiler and server components, which can reduce the amount of client JavaScript shipped, but it does not magically shrink your dependency tree. You still need to apply the techniques above.

Should I use Vite or webpack to get smaller bundles?

Both can produce equally small bundles. Vite is faster out of the box and has better defaults for modern browsers, but a well-configured webpack setup produces comparable output. Choose based on developer experience, not bundle size.

How do I check bundle size in a React Vite project?

Install rollup-plugin-visualizer, add it to your Vite plugins, then run npm run build. A treemap of your bundle will open automatically in the browser.

Is tree shaking enough on its own?

No. Tree shaking only removes unused exports. It cannot remove entire libraries you imported wrongly, split routes for you, or deduplicate packages. Combine it with code splitting and dependency auditing for real gains.

Will code splitting slow down navigation?

There is a tiny delay when a new chunk loads, but you can eliminate it by preloading. Use <link rel="modulepreload"> or React Router’s preload patterns to fetch chunks before the user clicks.

Reducing JavaScript bundle size in a React application is not about one silver bullet. It is a stack of small, measurable improvements. Start with the analyzer, hit the biggest offenders first, and lock in your progress with a CI budget. Your users, and your Lighthouse score, will thank you.