- JS Bundle 1: Contains scripts that are standard on every page (jQuery, cross page functions etc.)
- JS Bundle 2: Contains scripts specific to that page
- CSS bundle 1: Contains general site CSS (Layout, colors etc.(
- CSS Bundle 2: Contains CSS specific to that page
My theory behind that is, JS Bundle 1 and CSS Bundle 1 never change, so by having them in a separate bundle they can be cached and re-used on every page, whereas JS bundle 2 and CSS bundle 2 contain the code that changes per page. Sometimes these might only have one or two lines of code in them. I did some freelance work for a web development company using this method, and they told me it was bad/wrong and I should only use one bundle for each media type because using two bundles increases the number of requests and slows the page. I don't understand why this is slower than using two bundles?
First page visited (Say page1.html): 100kb of standard scripts used on every page and 5kb of custom scripts
With my method a user would have to download 105kb of media in two requests
With their method a user would have to download 105kb of media on one request
So on the first visit, I accept their method is faster but
Second page visited (page2.html): 100kb of standard scripts and 3kb of custom scripts
With my method, the standard scripts would already be cached so they would only have to download 3kb of scripts
With their method the user would have to downoad 103kb of scripts, just for the 3kb of custom scripts.
Yet they insist their method is faster, how is this possible? I'm sure having to make one extra request can't decrease the page load so much it's more effective to re-download 100kb of data they already have, and that's just the JS, adding the CSS that becomes nearer to double