我有一个老式的webapp，它有不同的网址，主要在服务器网站上为每个网页呈现，例如/contacts，/orders，/orders/123456。
我正在考虑将客户端代码分解为常见的和特定于页面的部分作为文件，以便我有一个这样的文件列表：
/js/common.js
/js/login_page.js
/js/contacts_page.js
/js/orders_page.js
/js/orderview_page.js
...
这样我在页面中会有两个链接 - 一个用于公共部分，另一个用于当前页面代码。
我认为它可以使页面加载更快，因为不必加载与当前页面无关的代码，而只需加载所需的代码。
尽管如此，有一种趋势是将整个文件集捆绑到一个文件中，这会使第一次加载更长，但其他页面代码会立即加载，因为它已经在缓存中。
/js/app.bundle.js
我应该选择什么策略以及哪些因素可以影响决定？
答案 0 :(得分：0)
根据我的理解，这里有2个选项。第一个是为每个页面使用单独的JS文件，而第二个选项是将所有文件组合在一起。 在任何一种情况下，如果文件在浏览器中缓存，那么重要的是初始加载时间。
加载不同文件的延迟主要是因为文件的大小，而在分别下载文件的每个文件时涉及的开销浪费了一些时间。 因此，如果您需要为特定页面下载10个文件，那么组合所有这10个文件将比将10个不同文件下载到一起稍快一些。但是，如果你是100个文件，但只需要10个文件，那么单独下载这10个文件将是一个更好的选择。
我想说你需要使用混合方法，其中你肯定将文件组合在一起但不是所有这些文件组合在一起。可以根据要求将您的文件划分为不同的组。让我们说你订购页面需要5个JS文件（orders_page.js，orderview_page.js等）然后将所有这些组合在一起。类似地，与联系相关的文件可以被聚合在一起。您可以在用户访问这些特定页面时下载它们。
话虽如此，您仍然应该单独维护代码库并寻找可以“构建”生产代码的库。优化变量名称（缩短它）的东西，删除空格并根据您的分组组合JS文件。可读性将在生产中实现，但它会使事情变得更快，您仍然可以在开发环境中处理干净/可读的代码。