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

Performance of loading one large javascript file vs multiple smaller files with less overall size?

本文关键字：文件性能小文一个大型加载 JavaScript 更新时间：2023-09-26

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

假设你有一个包含 4000 行代码的 javascript 文件，但在一个特定的页面上只使用了 500 行代码。仅在打开特定页面时加载脚本的这一部分是否有意义（性能方面）（使用 URL == X 然后加载 {}）？或者一次加载整个脚本会更好吗？

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

实际上，在粒度级别（问题中建议的~500行）分解按功能加载的javascript不会给你带来更好的性能。您将从组合、缩小和优化您的 JavaScript 中获得更多好处。不要忘记缩小你的CSS。

这

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

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

（注意 - 我链接到谷歌PageSpeed以获取上面的优化技巧 - 对于进行js优化还有很多有用的知识）