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

【问题标题】：Performance of loading one large javascript file vs multiple smaller files with less overall size?加载一个大型 javascript 文件与加载多个较小文件且整体大小较小的性能？
【发布时间】：2016-07-08 11:44:00
【问题描述】：

我有一个关于加载 javascript 文件的问题。从我目前所读到的内容来看，普遍的共识似乎是“脚本文件越少越好”，但我找不到下一个问题的答案：

假设您有一个包含 4000 行代码的 javascript 文件，但在一个特定页面上只使用了其中的 500 行。仅在打开特定页面时（使用 if URL == X then load {} 之类的东西）才加载脚本的这一部分是否有意义（性能方面）？还是一次加载整个脚本会更好？

（请假设有问题的脚本可以重构为多个文件）

【问题讨论】：

如何加载脚本的一部分？
取决于有多少用户访问了一个特定页面。
影响它的因素太多了，无法一言以蔽之。在绝大多数情况下，无论您采用哪种方式，都不会产生任何实际影响。
我认为这个想法是当你开发时，你将你的特性/功能模块化，这样你可以在发布每个页面时将不同的模块捆绑到单个文件中。

标签： javascript performance

【解决方案1】：

实际上，在粒度级别（如您的问题中建议的大约 500 行）分解功能加载的 javascript 不会为您提供更好的性能。您将从combining, minifying 和optimizing 您的javascript 中获得更多好处。不要忘记缩小 CSS。

这通常会加快下载时间，因为它不仅减少了传输的字节数（您关注的内容），而且实际上使您的 javascript 更小（使变量名更小并删除空格），并且还减少了数量HTTP 请求的数量（这实际上对页面性能有很大影响）。查看 this article 以更深入地演示这如何影响速度。

此外，通过始终使用相同的组合/缩小文件（而不是为应用程序中的每个页面使用不同的文件），您可以利用浏览器在首次加载时缓存脚本，这意味着在初始加载后，您的页面会它的脚本来自缓存。

（注意 - 我链接到 Google PageSpeed 以获取上面的优化提示 - 了解更多信息对于进行 js 优化很有用）

【讨论】：

谢谢你，克里斯，这很有帮助
向投反对票的人提出问题 - 您是否发现我可以改进这个答案没有什么用处？