javascript - 我应该将前端代码分为公共(public)部分和特定于页面的部分吗？

Question

我有一个相当老式的 Web 应用程序，它具有不同的 url，并且每个页面主要在服务器站点上呈现，例如 /contacts、/orders、/orders/123456.

我正在考虑将客户端代码分解为公共(public)部分和特定于页面的部分作为文件，这样我就会有一个像这样的文件列表:

/js/common.js

/js/login_page.js
/js/contacts_page.js
/js/orders_page.js
/js/orderview_page.js
...

这样，页面中就会有两个链接 - 一个用于公共(public)部分，一个用于当前页面代码。

我认为它可以使页面加载速度更快，因为不必加载与当前页面无关的代码，而只加载需要的代码。

尽管如此，有一种趋势是将整组文件 bundle 到一个文件中，这使得首次加载时间更长，但其他页面代码会立即加载，因为它已经在缓存中。

/js/app.bundle.js

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

Answer 1

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

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

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

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