0

I am using a Webpack in node.js to compile/bundle the Javascript for a static website. It's a fairly typical setup of multiple smaller JS files that compile into a single "main.js" file used across my site.

Say my Javascript pre-bundle looked like this:

module-a.js (50 kb)
module-b.js (50 kb)
module-c.js (50 kb)

And my site consists of 5 pages;

  • Page 1 utilizes code from module-a only.
  • Page 2 utilizes code from module-a and module-b.
  • Page 3 utilizes code from module-c only.
  • Page 4 utilizes code from all three modules, module-a, module-b, and module-c.
  • Page 5 utilizes nothing from the bundle.

My understanding is, based on the way Webpack compiles the main.js file, only resources needed from main.js on a page-by-page basis will be utilized and have any sort of performance impact. So on Page 5, main.js would be weightless or close to it (except for the HTTP request for main.js), Page 4 would experience the "full" weight of the package, and the other pages would load in pieces as needed.

Am I correctly understanding this? If so...

  • Does that mean there's very little (if any) benefits to having multiple specific bundles specialized to the pages themselves (i.e. a "main-a.js" for page 1, a "main-ab.js" for page 2, etc.)
  • Does the total size of my "main.js" file not really matter in terms of performance? So a main.js file that's 100 kb or 500 kb won't matter to a page utilizing the same functions in either? Compared to, say, a CSS file, where there could be performance concerns if a single CSS file were to get massively bloated over time.
  • Are there downsides to bundling all your JS in a single file like this? The only thing I can think of is having to build a new bundle for a change to any single module in terms of maintaining the package.

Thank you!

devforweb_17
  • 15
  • 5
  • Perhaps your best approach is: https://stackoverflow.com/a/67608368. Bundle size does matter, but only for clients on *really* poor connections, mostly, IMO – CertainPerformance Mar 18 '22 at 04:17
  • I don't think your understanding is correct. If all your pages are including `main.js`, then the full main.js will be in memory for all your pages, even though most of it is not being used. This has some benefits though because `main.js` can be efficiently cached by the browser so it is only loaded over the network the first time it is used and in subsequent pages, it is loaded from the browser memory or disk cache (resulting in much faster page load times). The drawbacks of having some unused code in memory for any given page are usually not noticed. – jfriend00 Mar 18 '22 at 04:32
  • The efficiency of good browser caching usually dwarfs any other types of optimizations you might get if you used separate, but fully optimized JS files for each separate page. Obviously, there's a limit. If you had a 10,000 page web site, you wouldn't necessarily want all Javascript functions for all 10,000 pages in one giant file. At some point, some modularity by breaking the client-side Javascript up into a small number of Javascript files where rarely used functions are not normally loaded would be beneficial. But, don't try to over optimize this because the benefits of caching are high. – jfriend00 Mar 18 '22 at 04:34
  • Thanks for the clarification @jfriend00 I was going off a very quick, incomplete test where I noticed (via inspector > network) pages on my site were downloading a much smaller main.js file that it actually was, but that seems to be fairly standard. My followup question: if a project is large and warrants some modularity, would it be best to have separate files loaded (ex. a "main.js" and "extra-1.js" both loaded) or to have a single new bundle file with the additional JS added? 1 requires extra HTTP requests, but 2 would (I believe) kill the benefits of caching. – devforweb_17 Mar 18 '22 at 16:59
  • @devforweb_17 - In most cases, I think you'd keep one bundle consistent and then have additional bundles you add as necessary. Keep in mind that adding an additional bundle to be sometimes used in combination with the main bundle that you use for some pages will only result in one http request for that page because the main bundle will likely already be cached. – jfriend00 Mar 18 '22 at 17:04
  • I'm also struggling to think of when it would be more beneficial to modularize based on this information. I guess if there was JS only featured on a very small number of pages of tertiary value, it could have some value - but only if those pages are so minor or rarely visited, it's worth harming the load time of those pages to benefit the others. And if that's the case, you would have to wonder why those pages even exist, let alone why they have their own very specific JS. – devforweb_17 Mar 18 '22 at 17:06

0 Answers0