One big javascript file or multiple smaller files?

问题:

This question already has answers here:

Put javascript in one .js file or break it out into multiple .js files? (10 answers)

Should I copy all my JavaScript sources into one single file? (3 answers)

Closed 6 years ago.

Ok, so I have a reasonable size project, where I'm using jquery backbone and a couple of other javascript libraries. I was wondering if I should have one file for my javascript libraries and another for my custom code. Or a bunch of separate javascript files.

回答1:

It is generally a good idea to have fewer HTTP requests. So you should reduce the number of files as much as is reasonable.

My personal preference is to have three "groups" of JavaScript files:

1. Core file. Contains functions that are used almost everywhere and other useful page initialisation things.
2. Module files. Contains code that is used in several places, but not everywhere. Can be dropped in to provide additional functionality. For instance, if you have a script to handle date inputs, you could include it as a module file and add it to pages that have date inputs.
3. Page-specific files. These files contain code that is only used in one place. The only reason they're added as separate files than as part of the page itself is for cache reasons.

回答2:

One big file. You should minify the code when it goes to production and compress it if its large. You want to make as few requests to the server as possible to improve page performance

回答3:

One big file or two files: one small and one big. To be clear, during the development it's good have separate files – maybe using something like requireJS. But when you deploy it, it's good compress everything in one file, in order to reduce the HTTP latency and requests.

I mentioned two files. In some cases, it could be good having one small file, that takes care of the "bootstrap" operations, meanwhile the "big file" – especially if it's really big – is downloaded. This is useful especially for the first access, because users doesn't have your files cached yet.

回答4:

It's best to separate it out, but not get overzealous. That way you can reuse your library code later. Also, everyone likes working with separate files more because it keeps things more organized.

That said, it's also best to give the user one compressed file so that everything can be cached easily, and this also reduces the number of page requests. Rails 3 does this automatically in the asset pipeline, for example. You can write a script to run your favorite compressor. But you shouldn't sacrifice code readability for this -- you can have your cake and eat it too!

回答5:

As suggested it is nice to work with smaller files, but for production code, your build process should include optimization. Part of that optimization should be minimizing the file sizes and network traffic optimzation, by combining into a single js file to reduce calls made by the browser.

回答6:

As a rule, I go with as few as possible simply to reduce the number of requests made to the server.

回答7:

Depends on the size of your application. But typically always better to group your javascript files appropriately for better maintainability and re-usability.

You could use a JS module loader like RequireJS to load your JavaScript. At least the files will be organized. You can enhance server performance by making sure these files can be cached on the user's browsers so that they only download them once.