javascript - How does bundle size affects performance? - Stack Overflow

admin管理员组

文章数量:1389924

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 paring to let's say 500KB bundle? (that has been uglified, or used .min npm packages)

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 paring to let's say 500KB bundle? (that has been uglified, or used .min npm packages)

• javascript
• performance
• webpack
• webpack-dev-server

Share Follow edited Dec 12, 2020 at 14:28 Ron Zano asked Dec 12, 2020 at 14:09 Ron ZanoRon Zano 59611 gold badge88 silver badges2323 bronze badges 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

Add a ment  | 

2 Answers 2

Sorted by: 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 pletes, 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.

JavaScript is parsed, piled 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/.

本文标签： javascriptHow does bundle size affects performanceStack Overflow