Shrinking Your bundle.js — Part 1: react-lite

An easy win with potentially large gains

• Potential gains: ~30% reduction in bundle size.
• Time required: 5 minutes.
• Difficulty: easy.

If your app is using React you can use the smaller react-lite as a drop-in replacement for your production builds. This change alone reduced my bundle size by slightly more than 30 percent.

What is it?

React-lite is an optimized implementation of React’s APIs. It leaves out some of the lesser used features such as server-side rendering (so only use it client-side), but it includes everything that’s used in the majority of builds.

If you want to know whether it will work for you, the easiest way to find out is to just try it. It only takes a few minutes…

How to do it

Lets say you are importing react like this:

import as React from "react";
import { render } from "react-dom";

To use react-lite we need all imports from react or react-dom to be imports from react-lite.

Luckily, Webpack has a feature to do just this without having to replace a single line of application code. Just add aliases to the resolve section of your webpack config.

resolve: {
    alias: {
      'react': 'react-lite',
      'react-dom': 'react-lite'
    }
  }

This tells Webpack to rewrite imports from react and react-dom as imports from react-lite.

Now just make sure to npm install react-lite and then run your build.

• Part 2: UglifyJSPlugin
• Full Series