Javascript 我是否应该将前端代码分为通用部分和页面特定部分？

我有一个相当老式的webapp，它有不同的URL，并且每个页面主要在服务器站点上呈现，比如

/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

---

我应该选择什么策略以及哪些因素会影响决策？

据我所知，您有两种选择。第一个选项是为每个页面使用单独的JS文件，而第二个选项是将所有文件组合在一起。 无论哪种情况，如果文件缓存在浏览器中，重要的是初始加载时间

加载不同文件的延迟主要是因为文件的大小，而单独下载文件的每个onne所涉及的开销浪费了一些时间。 因此，如果您需要为某个特定页面下载10个文件，那么将所有这10个文件组合起来比将10个不同的文件下载在一起要快一些。但是，如果您正在使用100个文件，但只需要其中的10个文件，那么单独下载这10个文件将是一个更好的选择

我想说的是，您需要使用一种混合的方法，在这种方法中，您一定要将文件组合在一起，但不能将所有文件都放在一个包中。可以根据需要将文件分为不同的组。假设您订购页面需要5个JS文件（orders_page.JS、orderview_page.JS等），然后将所有这些文件组合在一起。类似地，与联系人相关的文件也可以组合在一起。您可以在用户访问这些特定页面时下载它们

---

话虽如此，您仍然应该单独维护代码库，并寻找一些可以为生产“构建”代码的库。优化变量名（缩短变量名）、删除空格并根据分组组合JS文件的功能。可读性在生产环境中会受到影响，但它会使事情变得更快，并且您仍然可以在开发环境中使用干净/可读的代码。

据我所知，您有两种选择。第一个选项是为每个页面使用单独的JS文件，而第二个选项是将所有文件组合在一起。 无论哪种情况，如果文件缓存在浏览器中，重要的是初始加载时间

加载不同文件的延迟主要是因为文件的大小，而单独下载文件的每个onne所涉及的开销浪费了一些时间。 因此，如果您需要为某个特定页面下载10个文件，那么将所有这10个文件组合起来比将10个不同的文件下载在一起要快一些。但是，如果您正在使用100个文件，但只需要其中的10个文件，那么单独下载这10个文件将是一个更好的选择

我想说的是，您需要使用一种混合的方法，在这种方法中，您一定要将文件组合在一起，但不能将所有文件都放在一个包中。可以根据需要将文件分为不同的组。假设您订购页面需要5个JS文件（orders_page.JS、orderview_page.JS等），然后将所有这些文件组合在一起。类似地，与联系人相关的文件也可以组合在一起。您可以在用户访问这些特定页面时下载它们

---

话虽如此，您仍然应该单独维护代码库，并寻找一些可以为生产“构建”代码的库。优化变量名（缩短变量名）、删除空格并根据分组组合JS文件的功能。可读性在生产环境中会受到影响，但它会使事情变得更快，并且您仍然可以在开发环境中处理干净/可读的代码。

问题是，afaik，只生成一个bundle就是保存一个http请求，这应该比发出两个请求（一个用于普通代码，一个用于特定代码）更快，即使代码量更大。但是，这实际上取决于浏览器如何处理并发请求、对供应商脚本和页面正在执行的其他资源的请求数量以及页面从中加载资源的域配置。我相信，一种策略可能在旧浏览器中更快，在最新浏览器中更慢。然而，一个或两个捆绑包之间的差异是微不足道的。afaik，问题是，只生成一个捆绑包就保存了一个http请求，这应该比生成两个请求（一个用于普通代码，一个用于特定代码）要快，即使代码量更大。但是，这实际上取决于浏览器如何处理并发请求、对供应商脚本和页面正在执行的其他资源的请求数量以及页面从中加载资源的域配置。我相信，一种策略可能在旧浏览器中更快，在最新浏览器中更慢。然而，一个或两个捆绑包之间的差异很小。