I ignored my bundle size for months. By the time I checked, my production build was several megabytes of JavaScript in a single file — and every deploy forced my users to download all of it again. Vendor chunking is what I wish I'd known earlier.
Let's say you are building a project using React, and for that project you need some component library, a library to handle date-related things, or a library to handle your state. So you reach for the usual suspects — Material UI, dayjs, TanStack Query, Redux and so on.
Initially, everything will work smoothly for you as well as for your end users. But as you keep shipping new features and adding dependencies, the bundle quietly grows. Locally, you don't notice. But in production, it’s the end users who end up paying the price. What happens behind the scenes is that, when dependencies are included in the initial bundle, they can significantly increase the JavaScript downloaded by the browser. As a result, you end up with a poor Lighthouse score, slow initial load times, and a large JavaScript bundle — all of which hurt the user experience.
Your production build looks like this:
dist/assets/index-xxxx.js → 1.2 MB
