How to Reduce React Bundle Size in Production

# For Create React App
npm install --save-dev source-map-explorer

# Add to package.json scripts
"analyze": "source-map-explorer 'build/static/js/*.js'"

# Build and analyze
npm run build
npm run analyze

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

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

import React, { 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 (
    Loading...

// Bad — imports the entire lodash library (~70KB gzipped)
import _ from 'lodash';
const result = _.cloneDeep(obj);

// Good — imports only cloneDeep (~5KB gzipped)
import cloneDeep from 'lodash/cloneDeep';
const result = cloneDeep(obj);

// Better — use lodash-es for full tree shaking support
import { cloneDeep } from 'lodash-es';
const result = cloneDeep(obj);

// Load a heavy chart library only when the user opens the chart modal
async function handleOpenChart() {
  const { Chart } = await import('chart.js');
  const { renderChart } = await import('./chartUtils');
  renderChart(Chart, data);
}

// Or with a React component
const HeavyEditor = lazy(() => import('./HeavyEditor'));

function MyComponent() {
  const [showEditor, setShowEditor] = useState(false);

  return (
    

       setShowEditor(true)}>Open Editor
      {showEditor && (
        Loading editor...
}>
          
        
      )}
    

6. Optimize Images and Assets

Images aren’t technically part of your JavaScript bundle, but they account for a massive percentage of page weight. Use modern formats and lazy loading:

// Native lazy loading — supported in all modern browsers


// In Vite, use vite-imagetools for automatic WebP conversion
// vite.config.ts
import { imagetools } from 'vite-imagetools';

export default defineConfig({
  plugins: [imagetools()]
});

// Then in your component
import heroImg from './hero.jpg?format=webp&width=1200';

7. Configure Production Build Settings Properly

Vite handles this well out of the box, but if you’re on a custom Webpack config, double-check these settings:

// webpack.config.js — production settings
module.exports = {
  mode: 'production', // enables minification and tree shaking
  optimization: {
    usedExports: true, // enables tree shaking
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // removes console.log in production
          },
        },
      }),
    ],
  },
};

Separating vendor chunks from your app code means users can cache React and other stable libraries separately. When you deploy a new version of your app, they only re-download your changed code, not all of React again.

8. Enable Compression on Your Server

Gzip or Brotli compression can cut transferred bundle size by 60–80%. This is configured at the server/CDN level, not in your React build. If you’re hosting on Railway, most static hosting configs support Brotli compression out of the box when you deploy a static frontend service. Make sure your web server config includes it:

# nginx.conf
gzip on;
gzip_types text/plain application/javascript text/css application/json;
gzip_min_length 1000;

brotli on;
brotli_types text/plain application/javascript text/css application/json;
brotli_comp_level 6;

Putting It All Together

Knowing how to reduce React bundle size in production isn’t a one-time task — it’s an ongoing discipline. The practical checklist I use on every production deployment:

1. Run bundle analysis and identify the top 3 heaviest modules
2. Verify all routes are code-split with React.lazy
3. Check imports for full-library pulls (lodash, icons, UI components)
4. Confirm production mode and minification are active
5. Verify compression is enabled at the CDN or server level
6. Run Lighthouse and check the “Unused JavaScript” audit

The combination of code splitting, proper tree shaking, and compression typically gets most React apps under 200KB initial JavaScript — which is where you want to be for solid Core Web Vitals scores. Start with the bundle analyzer, fix the biggest offenders first, and you’ll see meaningful improvement within an afternoon of work.