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

  • 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.

--

--

--

Javascript Developer — Manchester

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thomas James Byers

Thomas James Byers

Javascript Developer — Manchester

More from Medium

Testing a HTTP Error Handler Utility Hook

PDKit: Project as Code

React local development and testing mocking with msw and mswjs/data

Micro-frontends: Fixing duplicate class name in Styled Component in