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

An easy win with potentially large gains

Thomas James Byers
Dec 17, 2016 · 2 min read
  • 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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade