Should all my javascript be in one file?

For each file you have, there are two steps :

• send the HTTP request to the server
• download the content of the file

If you reduce the number of files by combining them, you will reduce the number of HTTP requests -- which means your page will load a bit faster ;; which is good for your users ; which is why it's recommended.

But this will make debuggig harder, which is why it's recommended to do this only on your production environment, and not on the development platform -- hence the "making this part of your release process" part.

Of course, the process of combining your files content should not be done manually -- else, you'll have to re-do it each time there's a modification made ; it should be fully automated, and done at the time you are building the archive that is going to be deployed on your production server.

Also :

• You might gain a bit on the "dowload" part if using minification
• You will gain a lot more on the "download" part if using compression [see mod_deflate, for Apache]

Ideally, you can use all three solutions, btw ;-]

Placing the tags at the end of your page will :

• allow the content of the page [which generall is what matters the most] to be displayed faster
• but will only work if your page/JS is coded "correctly" [i.e. unobstrusive JS, not using JS "hardcoded" in the HTML page]

This can help too -- but might be a bit harder to achieve than combinaison+minification+compression.

I am trying to add some JS functionality to a second page of my website, but work off the same JS file for both the first and second pages. When I start up the second page on Localhost, however, I get a whole bunch of errors because the JS script is looking for divs, elements on the first page which it can't find [and vice versa].

My understanding is that it is better to have ONE JS file and have it accessed by your various HTML files but then I am getting all manner of errors and headaches. So is this correct? Or can I have seperate JS files for each of the HTML files [like tag-teams]?

I have read around the internet that for deployment it is better to have one big JS file but then I am stuck back at my original problem...

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?

Rocklan

4,2741 gold badge14 silver badges28 bronze badges

asked Jul 14, 2014 at 21:51

1

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:

• Using Require.js in an ASP.NET MVC application

answered Jul 21, 2014 at 21:47

AlexanderAlexander

3781 gold badge5 silver badges14 bronze badges

The only possible downsides to bundling all of your JS into one file that I can think of are:

1. Some of the your files may not "play well" together. Eg if one file is missing a semicolon at the end then bundling another file onto the end might break things. This has happened to me more than once.

2. Some files might depend on being in a particular path, and your one bundle can only be in the one spot. You might have to move around a bunch of images or css files or modify the JS files so that the relative paths are correct.

3. There might be conflicting libraries [maybe one page uses jquery 1.7 and another 1.10]

4. Changing one file will result in the whole bundle being regenerated with a new URL.

5. One very large initial download. If there's not a lot of JS commonality amongst pages then you could argue that it's a large overhead hit that could be spread across requests.

Having said all that, I say go for it. I don't think the above are much of a concern. You'll very quickly see what the issues will be :]

answered Jul 21, 2014 at 23:47

RocklanRocklan

4,2741 gold badge14 silver badges28 bronze badges

Is it good to have multiple JS files?

Can JavaScript be in a separate file?

Does the order of JavaScript files matter?

Where should I store JavaScript files?