Minimizing Bundle Size with React, React Router and Webpack 5

Help! My Webpack bundle is 60 MB

Follow These Steps to Minimize Your Bundle Size

Gizmo is a free Knowledge and Content Management System (KCMS) deployed as a Progressive Web App (PWA). As a PWA, it makes good use of caching in the browser, meaning that once you’ve gotten the initial download, performance is great — just like a desktop app.

So, does bundle size even matter? It does, because that first download is a doozy and folks just don’t want to wait for it. Google tells us that as page load time goes from 1 second to 10 seconds we’ll lose a majority of our potential users. So we need to show something on the screen in a jiffy.

This article takes you through the process I used to optimize the bundle for Gizmo. Some things helped, and some things didn’t, and in the end it was a coding tradeoff that had the most impact of all. I’ll show you the steps I took with the hope it might help you in your own bundle-related endeavors.

Step 0 — Let’s Begin

We’ll use Chrome’s Lighthouse to track our progress. The key metrics we’ll use are:

First Contentful Paint (FCP) is when the browser renders the first bit of content from the DOM, which tells the user…