It was time to explore the optimization possibilities for the app I’ve been working on.
Our main bundle was 1.25 MB (515 kB gzip).
create-react-app handles the build and produces the bundle with the source map.
All bundle visualization tools I remember looking at required webpack config tweaking. But source-map-explorer is simple to use:
source-map-explorer \ build/static/js/main.9998a4e8.js \ build/static/js/main.9998a4e8.js.map
It produces beatiful dependency hierarchy:
My first surprise was the size of Firebase with its 300 kB. I noticed
messaging.js which correspond to newer Firebase 3 features we did not use.
There should be a way to include only necessary modules. After a quick search I found an answer in the NPM readme of the
import firebase from 'firebase';
you can do
import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/database';
This achieved a small win in 25 kB. Bundle size was down to 491 kB gzip.
Next, I was looking at 130 kB
iconv-lite. I had no idea where it came from. npm still doesn’t have a nice command to explain why the module is in
node_modules. I had to unleash my shell skills:
npm ls | grep -B 5 iconv-lite
├─┬ email@example.com │ ├─┬ firstname.lastname@example.org │ │ ├─┬ email@example.com │ │ │ └── firstname.lastname@example.org
lokka! This is the GraphQL client we use.
I couldn’t find a way to reduce the size of
node-fetch through webpack bundling. But it took me only about an hour to switch to a different GraphQL client (Apollo Client).
From 515 kB to 284 kB, much better. Time to get some users.