假设一个 Web 应用程序有几十个页面组(pg1、pg2 等)，其中一些页面组需要一些仅针对它们的 JavaScript 代码，而不是针对整个应用程序。例如，对 window.resize() 的一些视觉修复可能只在 pg2 中相关，而在其他地方不相关。
以下是一些可能的解决方案:
1/集中式:整个应用程序有一个脚本文件来处理所有页面组。很容易知道相关的 DOM 对象是否存在，因此所有不相关的页面只需执行一个小的额外 if()。
最大的优势是整个 web 应用程序的所有 JS 都加载一次，不需要修改 HTML 代码。缺点是对不相关的页面添加了额外的检查。
2/混合:集中脚本检查页面上是否存在特定功能，如果存在则启动它。例如我们可以添加一个
if (typeof page_specific_resize === 'function') page_specific_resize();
本例中的特定页组将具有:
<script>
function page_specific_resize() {
//....
}
</script>
优点是代码仅针对相关页面存在，因此不会在每个页面上都进行测试。缺点是整个页面组中 HTML 结果的额外大小。如果代码行不止几行，页面组可能能够加载特定于它的额外脚本，但随后我们会在那里添加一个 http 调用，以可能在集中式脚本中节省几公斤。
最佳做法是什么？请评论这些解决方案或提出您自己的解决方案。添加一些资源来支持您对更好的东西的主张(考虑性能和易于维护)会很棒。将选择最详细的答案。谢谢。
考虑最佳解决方案有点困难，因为这是一个假设场景，我们没有数据可以处理:加载最多的页面是什么，有多少，脚本总大小等。 .
就是说，我没有找到具体的答案，最佳实践 TM，但找到了人们一致同意的一般要点。
1)缓存:
据此:
https://developer.yahoo.com/performance/rules.html
"Using external files in the real world generally produces faster
pages because the JavaScript and CSS files are cached by the browser"
2) 缩小
还是根据雅虎链接:
"[minification] improves response time performance because the size of the downloaded file is reduced"
3) HTTP 请求
最好减少 HTTP 调用(基于社区回答)。
One big javascript file or multiple smaller files?
Best practice to optimize javascript loading
4) 您是否需要那个特定的脚本？
根据:https://github.com/stevekwan/best-practices/blob/master/javascript/best-practices.md
"JavaScript should be used to decorate your site with additional functionality, and should not be required for your site to be operational."
这取决于您必须加载的资源。取决于特定页面组的加载频率或您希望它被请求的频率。 Web 应用程序是单页的？每个特定脚本的作用是什么？
如果脚本加载一个表单，用户将不需要多次访问该页面。无论如何，用户以后都需要互联网连接才能发布数据。
但是如果它是一个调整页面大小的脚本并且用户有一些连接问题(例如:在移动设备上访问您的网络应用程序，同时乘坐地铁)，最好已经加载代码以便用户可以自由导航。根据我之前发布的 Github 链接:
"Events that get fired all the time (for example, resizing/scrolling)"
是应该优化的一件事，因为它与性能有关。
将一个 JS 文件中的所有代码压缩到早期缓存将减少请求的数量。此外，建立连接可能需要几秒钟，但处理一堆“if”语句需要几毫秒。
但是，如果您的一个大型 JS 文件只用于一个不是应用程序核心的功能(例如，这个单个文件的大小几乎是其他脚本总和的 n%)，那么就没有需要让用户等待该特定功能。
"If your page is media-heavy, we recommend investigating JavaScript techniques to load media assets only when they are required."