3

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)

Improve this question
2
  • 1
    You can use Dev Tools in the browser to analyze performance, it will tell you how much impact is your javascript doing. Open Dev Tools, go to Performance and Start profiling and reload the page. You'll have a report and the Scripting legend is the time consumed by your scripts on load.
    – arieljuod
    Commented Dec 12, 2020 at 14:15
  • 15 mb is too much. You should use async importing on webpack that will reduce your bundle size.
    – Gurkan Ugurlu
    Commented Dec 12, 2020 at 14:21

2 Answers 2

Reset to default
5

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.

Improve this 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/.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.