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.)