Javascript – Should I group all of the .js files into one large bundle

asp.netbundlingjavascriptperformancewebsite-performance

One of the difficulties I'm running into with my current project is that the previous developer spaghetti'd the javascript code in lots of different files. We have modal dialogs that are reused in different places and I find that the same .js file is often loaded twice.

My thinking is that I'd like to just load all of the .js files in _Layout.cshtml, and that way I know it's loaded once and only once. Also, the client should only have to download this file once as well. It should be cached and therefore shouldn't really be a performance hit, except for the first page load.

I should probably note that I am using ASP.Net bundling as well and loading most of the jQuery/bootstrap/etc from CDN's.

Is there anything else that I'm not thinking of that would cause problems here? Should I bundle everything into a single file?

Best Answer

Depending on the size of the application, it might be worthwhile to modify your app to use modules with an AMD loader, such as RequireJS.

By moving your code into separate modules and letting an AMD loader manage the dependencies, your code should become more organized and prevent the issue of you having to manually load files. You can use this for files that are hosted on your server, as well as files being served from a CDN.

Also, here's an article explaining how to use RequireJS with an ASP.NET app: