Is it better practice to bundle scripts into a single bundle per page, or have several bundles?

Question

In a web application I'm working on, there are 3 types of scripts (same applies to stylesheets):

• Those needed on every single page (e.g. jquery)
• Those needed on several pages, but not all (e.g. a lightbox library used on pages which show user uploaded images)
• Those needed on a single page (e.g. something specific to that page's functionality)

Should each page have its own bundle which bundles together all the scripts it needs? Or should each type of script be its own bundle (i.e. a page might load 3 bundles - essentialScripts.js, mediaLibraries.js and pageSpecificScripts.js)? Or is there a better approach I'm not aware of?

What is best practice for bundling these scripts, and what advantages/disadvantages are there to different approaches?

(I'm not sure how relevant this will be, but the project I'm working on is using ASP.NET MVC bundling. Also, to keep things simpler, let's assume that none of the files will come from a 3rd party CDN so they're all being loaded from the same place and the client won't have any from visiting other sites.)

Answer 1

For complex applications it makes sense to make the split you suggested. Your common bits, especially external libraries, will change much less often than application code. So they are prime candidates for caching. Bundling everything together prevents that. On the other hand they add extra HTTP requests. Which would make the initial experience a little bit less nice. A common pattern is to have external libraries in one bundle and application code in another. Especially when the latter is smaller and there's a lot of sharing between pages and views, it makes sense.

This is a moving Target however. Today's best practices are tomorrow's anti-patterns. The advice changes in a world where http/2 is common, or when client side modules are supported by all major browsers.