one single compressed js file VS compressed requirejs module files

Question

I just started using requirejs and I love it. I have one concern though. I've been compressing all my js files into one single file. Even with requirejs optimizer, I need to load module files from the server time to time and I'm concerned with it.

Performance and user experience wise, which one is better?

• Andrea: I am not sure I understand your concerns. With the optimizer you can get away with just two files: requireJS itself and the optimized file. Is it a problem loading two files instead of one?

Answer 1

Performance and user experience wise, which one is better?

A single compressed file.

It is a single connection, so the browser is free to download other assets.

It is compressed, so it takes less time to transfer to the browser.

Both mean that the page and the javascript run faster - this is better user experience and better performance.

Win win.

• Moon: @ooded // but the problem of compressing all the files is that the result file might contain codes that users might never hit. What do you think about it?
• Oded: @Moon - Yes, that's a risk. Some minification frameworks let you tailor which files go with which page, to remove this issue.
• Ryan Mann: It will get browser cached though and only needs to be cache busted if some code was changed. Modern frameworks like MVC 5's Script Bundler and MVC 6's Tag Helpers handle this cache busting for you automatically. So imo, having unused code in the file isn't such a huge deal. My preferred method though is to have 3 JS files. All the libraries I use compressed into 1 js file which loads first. Then my app's JS file (jquery extensions, prototypes, and app specific global code) which loads second. And finally my page specific JS files (if the page has one). So 2 in some cases, 3 at most.

Answer 2

The reason to break up your .js files is to reduce the initial load time to be as small as possible. the first load is the most critical because it generally determines if a user will bother with exploring your site further or they perceive it as slow. If that first load is important to you it may be worth taking out unneeded files for your homepage and checking if it noticeably changes that initial load, otherwise Oded's advice is solid.

• Ryan Mann: First page load is actually pretty easy to not be an issue if you load your script in the footer and don't use js base styles, js less/sass processors. E.g. you build and compile all your js and sass with node to finalized distributions. Style your site with straight css (compiled from w/e in node js) and don't do any dynamic jss style changes that your site depends on to look fully loaded. You put your 1 Css link in the header, and your JS in the footer. The site will look loaded near instantly, even though the JS might still be loading for a few hundred milliseconds.