How does bundle size affects performance?

Question

Let's say that the final bundle produced by webpack is around ~15MB.
Besides slow loading for the first time on the site, are there any significant performance issues comparing to let's say 500KB bundle? (that has been uglified, or used.min npm packages)

Answer 1

JavaScript is parsed, compiled and executed in the main thread of the browser, which means the users have to wait for all this before they can interact with the website.

15MB is a lot of JS code.

There are tools for profiling the performance built in into the major web browsers, which you can check out.

You can learn more about this here: https://web.dev/bootup-time/ .

Answer 2

Performance implications include:

• Time to transmit over the network. Especially consider slow connections with some mobile devices. Depending on what you're doing it's possible your page will not be interactive until it loads.
• JS parse time. Modern JS engines are fast, but the more code you load the more the browser must parse through.
• JS execution time. Optimally you'd only pack code you expect to execute. The more code you want to execute the longer it will take. Again it's possible your page won't be interactive until much of this completes, depending on the details.
• Memory consumption. Everything takes up space: the code itself, runtime variables, DOM elements created, etc.

It's important to use the developer tools of your favorite browser to analyze the impact of your code. Be sure to remove any JS your site doesn't really need.