加载一个大的 javascript 文件与多个整体大小较小的小文件的性能？

Question

I have a question regarding the loading of javascript files. From what I've read so far, the general consensus appears to be "less script files is better", but I could not find an answer to my next question:

Say you have a javascript file with 4000 lines of code, but only 500 lines of that are used on one specific page. Would it make sense (performance-wise) to only load this part of the script when that specific page is opened (using something like if URL == X then load {})? Or would it be better if you load the entire script all at once?

(Please assume the script in question can be refactored into multiple files)

Answer 1

Realistically, breaking up the javascript loaded by functionality at a granular level (~500 lines as suggested in your question) will not give you much better performance. You'll get a lot more benefits from combining, minifying , and optimizing your javascript. Don't forget to minify your CSS as well.

This will generally speed up download times because it not only reduces the number of bytes transferred (what you're focusing on), but actually makes your javascript smaller (making variable names smaller & removing whitespace), and also reduces the number of HTTP requests (this actually has a large effect on page performance). Check out this article for a more in depth demo of how this has an effect on speed.

Additionally, by always using the same combined/minified file (instead of a different one for each page in your app), you take advantage of the browser caching your script on first load, meaning after the initial load, your page gets its scripts from cache.

(Note - I linked to Google PageSpeed for optimization tips above - there is a lot more than this that is useful to know for doing js optimizations)