View profile

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
Does Webpack Bundle Size Matter?
By Mastering JS Weekly • Issue #31 • View online
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.

He has a point that the React community doesn't want you to know about
He has a point that the React community doesn't want you to know about
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.
You only get 1638.4 kbps, which puts a limit on your bundle size
You only get 1638.4 kbps, which puts a limit on your bundle size
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.
How long it takes to download 0.39 MB on various connection speeds
How long it takes to download 0.39 MB on various connection speeds
That gives you some room to work with, but not much since create-react-app sends a 373 MB bundle by default.
CRA...P
CRA...P
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.
Most Recent Tutorials
Other Interesting Reads
Understand JavaScript Reduce With 5 Examples | www.thecodebarbarian.com
Lighthouse  |  Tools for Web Developers  |  Google Developers
Did you enjoy this issue?
Mastering JS Weekly

A weekly summary of our tutorials

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue