Does Webpack Bundle Size Matter?

There was a spirited debate on Twitter a few weeks ago on the topic of Webpack bundle size, based on the idea that Webpack was to blame for the plethora of horribly bloated websites out there.

The link is to this test result, which indicates that earlier versions of the rt.live website loaded over 1.3 MB of assets and took nearly 15 seconds to load on older mobile devices.

So how big is too big when it comes to Webpack bundles?

For certain apps, the answer is obvious. For example, if you’re building a GraphQL API to ship to AWS Lambda, you’re limited to 50MB by AWS. For client apps, the answer is a bit more nuanced.

Google Lighthouse is quickly becoming the de facto tool to objectively grade your website’s performance. Lighthouse grades your website on a scale from 0-100 on several factors, including performance. Scoring poorly on Lighthouse means worse SEO for your site.

One key performance metric for Lighthouse is the time to first meaningful paint (FMP for short), which is the amount of time between when the page starts loading and when it shows meaningful content to the user. To score a 75 or higher, your page needs to reach FMP within 2 seconds on the below device.

If you’re building an app in React or Vue, odds are you need to load your JavaScript bundle to render the page. Unless you’re using server-side rendering. By plugging 1638 Kbps into download-time.com, you can see that you can download 0.39 MB, or 390 KB, within 2 seconds on the simulated Lighthouse phone.

That gives you some room to work with, but not much since create-react-app sends a 373 MB bundle by default.

So what can you do to keep bundle size small? There’s a lot of options out there for reducing bundle size using Webpack, like tree shaking. Another way is to simply avoid using any frontend JavaScript frameworks on your marketing pages, or any page that needs to be optimized for SEO. There’s no reason to have React on your blog, unless you have a blog post with some React demos.

Another way is to use server-side rendering where possible. Using SSR and then hydrating your page after it loads is a great way to minimize your FMP while still using a modern frontend framework, like Vue.