I’ve picked through enough React codebases to recognize the habit. Teams kick the bundle-size can down the road, ship a few more features, and then wake up to a dashboard that’s gulping 1.2 MB of parsed JavaScript. On a lousy 3G connection, the login form stares back at you for eight seconds. The knee-jerk fix is to yank features, but there’s a better way. You just need to stop hauling dead weight and start slicing what you actually use. Here’s what moves the needle—no fluff, no fairy tales.

Get a Real Baseline First

Guessing won’t cut it. Before you touch a single import, know exactly what you’re shipping. I reach for source-map-explorer or the visualizer baked into Webpack. Hunt for chunks above 100 KB parsed size—they’re your first targets. Parsed size matters more than gzipped because the browser still has to chew through every byte. Run this on your production build, not dev mode. Dev bundles carry hot module replacement scaffolding and unminified code that lies to you. If you’re on Create React App, trigger npm run build -- --stats and feed the output into a visualizer. You’ll often catch entire utility libraries getting yanked in for a single function, or icon kits loading thousands of SVGs when you use maybe six. That’s low fruit you can pick before lunch.

Tree Shaking: Make Your Imports Surgical

Tree shaking sounds like it should just work, but it’s finicky. ES modules with named exports give bundlers the best shot at ditching unused code. Import a default export from a CommonJS module? The whole module often gets vacuumed up. Check your dependencies: if a package ships a module field pointing to an ESM build, your bundler can shake it. If not, you’re stuck with whatever the author bundled. For Lodash, the fix is brain-dead simple: swap import _ from 'lodash' for import debounce from 'lodash/debounce'. Even better, lean on native methods—Array.prototype.find and Object.assign cover a lot of ground without adding a single kilobyte.

Moment.js and Other Heavy Hitters

Moment.js is the classic bundle hog. It drags in locale data and timezone rules you rarely touch. Your move: switch to date-fns, which tree-shakes beautifully because you grab only the functions you call, or go lighter with Day.js (2 KB core). Stuck with Moment? Use moment-timezone sparingly and strip unused locales with Webpack’s IgnorePlugin. Same logic for charting libraries. A full Chart.js import with every controller and scale can bloat to 200 KB. Import only the pieces you register: import { Chart, LineController, CategoryScale } from 'chart.js'. You’ll shed 60% of the weight and still deliver the line chart your product team begged for.

Code Splitting That Respects How People Actually Use Your App

Lazy loading isn’t just for routes. Sure, React.lazy and Suspense at the route level is the on-ramp, but the real savings kick in when you split at the component level and conditionally. Got an admin panel with a rich text editor that clocks 150 KB? Load it only when someone clicks “Edit.” A pattern I keep coming back to:

const RichEditor = React.lazy(() => import('./RichEditor'));

function Dashboard() {
  const [editing, setEditing] = React.useState(false);
  return (
    <div>
      {editing && (
        <Suspense fallback={<Spinner />}>
          <RichEditor />
        </Suspense>
      )}
      <button onClick={() => setEditing(true)}>Edit</button>
    </div>
  );
}

This keeps the editor’s dependency chain out of your main bundle. Pair it with a preloading trick: fire the import on hover or mouse-down so the chunk lands just before the click finishes. That 50-millisecond head start makes lazy loading feel instant. Webpack’s /* webpackPrefetch: true */ magic comment helps, but don’t go nuts—prefetching too many chunks fights with critical resources on slow connections.

Chunk Naming and Caching

Give your chunks real names with /* webpackChunkName: "editor" */. Cache invalidation gets predictable: when the editor module changes, only its chunk hash updates. Everything else stays cached. Steer clear of giant vendor chunks. Split your node_modules by how often they change. A chunk with React, ReactDOM, and react-router is fine to keep together—they’re stable. But pull analytics scripts, third-party widgets, and polyfills into their own chunks. Users who already have your shell cached won’t re-download a polyfill they never needed.

Dependency Audits: Hunt Down What You Don’t Use

Every project picks up dependencies that hang around like stale leftovers. Run npx depcheck to smoke out unused packages. Then check what each remaining dependency actually costs. Tools like Bundlephobia show you the tree-shaken, minified damage of any npm package. I once found a package that advertised 3 KB but pulled in 50 KB of transitive crud. In another audit, react-icons was loading an entire icon set when the team used four icons. Swapping to direct SVG imports lopped off 80 KB. The icons looked the same. No feature loss, just less junk.

Duplication is sneaky. Two packages can depend on different versions of the same sub-dependency. npm ls lodash or Yarn’s why command surfaces these. Flatten them with npm dedupe or Yarn resolutions. One version of a utility library can claw back 30–50 KB parsed. And ask yourself: do you even need that library? The query-string package is handy, but the browser’s URLSearchParams API handles most parsing without an import.

Production-Only Build Checks

Your production build should be stripped of anything development-only. React’s dev build packs warnings and proptype checks that add weight. Make sure you’re building with NODE_ENV=production. Verify dead-code elimination is actually happening by scanning for __DEV__ flags in your output. Some libraries leave debug logs that survive minification unless you configure Webpack’s DefinePlugin or Terser’s drop_console option. Don’t blindly nuke all console statements—you might have intentional error logging—but strip the verbose debug noise from libraries you don’t control.

Turn on gzip or Brotli on your server. It’s not a bundle-size fix, but it’s the quickest win for transfer size. A 500 KB parsed bundle often shrinks to 120 KB over the wire. If you’re on a CDN, check that compression is enabled for all static assets. Some CDNs skip compression for files under a certain threshold; lower that to 100 bytes to catch small chunks.

Swapping Out Heavy State Management

Redux itself isn’t fat, but its ecosystem can get that way. Middleware like redux-saga and redux-observable adds heft. If you’re on Redux Toolkit, you’re already in decent shape—it bundles Immer and thunk middleware by default, keeping the core lean. But do you need Redux at all? For server-state caching, React Query or SWR slashes hundreds of boilerplate lines and the bundle cost that comes with them. They deduplicate requests and cache responses, which shrinks the data-fetching logic living in your bundle. One client I worked with shed 40% of their Redux-related code and 22 KB of bundle size by moving to React Query for API calls, keeping Redux only for a tiny slice of UI state.

Selective Polyfilling

Polyfills are insurance that often over-insures. If your app targets modern browsers, ditch the polyfills for Promise, fetch, and Array.prototype.includes. Use browserslist to define your supported browsers and let Babel or SWC skip unnecessary transforms. A browserslist of > 0.5%, last 2 versions, Firefox ESR, not dead typically lets you drop most ES6+ polyfills. The bundle shrinks 15–30 KB right there. If you’re stuck supporting IE11, isolate its polyfills in a separate chunk loaded only when the user agent demands it. Most of your users won’t pay the tax.

FAQ

What’s the fastest way to find bloat in a mature React app?

Ship a production build with source maps and run it through source-map-explorer. Sort by parsed size and eyeball the top five chunks. Often, the worst offender is a utility library imported for one function or a Moment.js locale file. Fix those first—quick wins that don’t touch features.

Does code splitting hurt SEO or initial render?

Route-based splitting with server-side rendering can trip up hydration. If SEO matters, make sure your server sends a fully rendered page. Client-side splitting still works: the initial HTML has the critical content, and split chunks load asynchronously without blocking the crawler. Use React.lazy with a loading state that doesn’t shift layout, and search engines index the page fine.

How do I get my team to care about bundle size?

Translate bundle size to business numbers. A 500 KB bundle on 3G tacks about 4 seconds onto Time to Interactive. Google’s mobile speed data shows a 1-second delay can drop conversions by up to 7%. Propose one low-risk change—like swapping a heavy library for a lighter one—and measure the impact with a Lighthouse audit. A small, measurable win builds momentum for bigger refactors.

Can I use dynamic imports inside event handlers?

Yep, and it’s strong for features like export-to-PDF or complex modals. Call import('./HeavyModule') inside a click handler and load the component only when needed. Wrap the import in a Suspense boundary or manage the loading state manually. This keeps the main bundle lean and shifts the cost to the user action, where perceived performance matters less.