多个JavaScript文件合并为一个

Question

I am developing in ASP.NET MVC and using multiple JavaScript files. Eg jQuery, jQuery UI, Google Maps, my own JavaScript files, etc.

For performance, should I combine these into one? If so, how?

Answer 1

The reason you want to combine many files into one is so to minimize latency of setting up and tearing down http requests, the fewer you make the better. However, many newer browsers are downloading JavaScript files in parallel (still executing sequentially). The consequence is that downloading a single 1Mb file may be slower than three 350Kb files. What I've come to do is to separate my files into three bundles:

• External lib files (jquery, flot, plugins)
• Internal lib files (shared by multiple pages)
• Page specific files (used only by that page, maybe by two pages)

This way, I get the best of both worlds: not an excessive number of http requests at startup, but also, it's not a single file that can't benefit from parallel downloads

The same applies to CSS, each page load three CSS bundles. So in total, our pages download six bundled files plus the main html file. I find this to be a good compromise. You may find that a different grouping of files works better for you, but my advice is don't create a single bundle, unless it's a one page app. if you find yourself putting the same file into different bundles a lot, it's time to re-think the bundling strategy since you're downloading the same content multiple times.

What to use? Martijn's suggestions are on the money. YUI is the most widely used from my experience, that's what we used at my previous and current jobs.

Answer 2

For the question of whether you should, check out the link in Shoban's comment.

For the question of how:

• Google's Closure Compiler
• Yahoo!'s YUI Compressor

Answer 3

If they are all going to be included on all of your pages, then it doesn't really make a difference. But if some are only relevant to certain pages, it would technically be better to keep them separated and only include the relevant ones on relevant pages.

Answer 4

As far as I know, you should indeed : less files means less http get, hence better performance for the user when they first load the page. So they will save a split second they will come on your page for the first page. But after, these files are cashed, and it makes then no difference at all...

I haven't digged into the javascript engines itselves, but a function in one file will be handled in the same way if it is in a big file or a small file. So it makes no difference in the execution.

So, save your time, don't change anything as it'll cost you too much time for too little reward, especially when you'll discover that you want the latest version of jquery (a new version came out today btw), and that you have to re-concatene everything...