一个大的 javascript 文件还是多个较小的文件？ [复制]答案

【问题标题】：One big javascript file or multiple smaller files? [duplicate]一个大的 javascript 文件还是多个较小的文件？ [复制]
【发布时间】：2013-02-20 14:52:00
【问题描述】：

好的，所以我有一个合理大小的项目，我在其中使用 jquery 主干和其他几个 javascript 库。我想知道是否应该为我的 javascript 库提供一个文件，为我的自定义代码提供另一个文件。或者一堆单独的 javascript 文件。

【问题讨论】：

【解决方案1】：

最好把它分开，但不要过分热心。这样您以后就可以重用您的库代码。此外，每个人都更喜欢使用单独的文件，因为这样可以让事情更有条理。

也就是说，最好也给用户一个压缩文件，这样一切都可以很容易地被缓存，这也减少了页面请求的数量。例如，Rails 3 在资产管道中自动执行此操作。你可以编写一个脚本来运行你最喜欢的压缩器。但是你不应该为此牺牲代码的可读性——你可以吃蛋糕也可以吃！

【讨论】：

人们投反对票是因为这个答案不正确。当然，您应该将您的 js 拆分为逻辑组件以使事情井井有条。但是您应该在将它们发送给用户之前将它们组合起来，以减少 http 请求。只将它们拆分为“永远不可能改变”、“有点可能改变”和“经常改变”的逻辑缓存组件。
...这就是我的回答所说的。您只希望用户缓存一个大文件。
啊，自从我看到它以来，您就编辑了答案。（为了记录，我没有投反对票，只是想解释为什么投反对票）。
是的，我的第一个答案只有第一部分。我想我应该得到它，因为第一次没有清楚地解释开发和生产之间的区别。
@bchurchill 我认为您在生产环境中不需要可读性，因此最好将 http 请求和网络延迟降至合理的水平。只有在开发时才需要可读性

【解决方案2】：

一个大文件。当代码投入生产时，您应该缩小代码，如果它很大，则压缩它。您希望向服务器发出尽可能少的请求以提高页面性能

【讨论】：

我不同意。您应该在开发中分离您的文件，以便您可以读取它们，然后有一个部署脚本将其打包并压缩。没有人喜欢阅读缩小的代码，但这是你需要提供给用户的。
@bchurchill - 我在我的回答中说“当它投入生产时” - 从项目开始到部署，您如何维护代码是非常短暂的，与应用程序性能无关。运行时的可读性可能对教学有好处，但会影响性能。
为什么在初始页面加载时需要将所有 JS 文件嵌入到一个大文件中？ Google 将初始页面加载速度列为负数，您应该推迟在初始页面加载（入口页面）时不需要的 JS 文件和函数。

【解决方案3】：

减少 HTTP 请求通常是个好主意。所以你应该尽可能减少文件的数量合理。

我个人的偏好是拥有三个 JavaScript 文件“组”：

核心文件。包含几乎无处不在的函数和其他有用的页面初始化内容。
模块文件。包含在多个地方使用但并非无处不在的代码。可以放入以提供附加功能。例如，如果您有一个处理日期输入的脚本，则可以将其作为模块文件包含在内，并将其添加到具有日期输入的页面中。
特定于页面的文件。这些文件包含仅在一处使用的代码。它们被添加为单独文件而不是页面本身的一部分的唯一原因是出于缓存原因。

【讨论】：

为什么不使用 Browserify 之类的东西将所有内容捆绑在一起并为每个页面/页面模板提供单个 JS 文件。通过这种方式，您可以选择开发中每个模板所需的模块，并将它们捆绑到一个压缩文件中。
@Nick 因为那样你会为每一页重复发送“核心”模块，而不是发送一个“核心”JS文件。
没有重复代码，每个文件都可以单独缓存在ServiceWorker中。这是不好的做法吗？

【解决方案4】：

正如建议的那样，使用较小的文件很好，但对于生产代码，您的构建过程应该包括优化。优化的一部分应该是最小化文件大小和网络流量优化，通过组合成一个 js 文件来减少浏览器的调用。

【讨论】：

【解决方案5】：

作为一项规则，我会尽可能少地使用，以减少向服务器发出的请求数。

【讨论】：

【解决方案6】：

取决于您的应用程序的大小。但通常总是更好地对您的 javascript 文件进行适当的分组，以获得更好的可维护性和可重用性。

您可以使用像 RequireJS 这样的 JS 模块加载器来加载您的 JavaScript。至少文件将被组织起来。您可以确保这些文件可以缓存在用户的浏览器上，以便他们只下载一次，从而提高服务器性能。

【讨论】：

【解决方案7】：

一个大文件或两个文件：一个小文件和一个大文件。需要明确的是，在开发过程中最好有单独的文件——也许使用像requireJS 这样的东西。但是在部署时，最好将所有内容压缩到一个文件中，以减少 HTTP 延迟和请求。

我提到了两个文件。在某些情况下，最好有一个小文件来处理“引导”操作，同时下载“大文件”——尤其是当它真的很大的时候。这对于首次访问尤其有用，因为用户尚未缓存您的文件。

【讨论】：

+1，很好的答案，但我还要补充一点，您有时也可以通过创建两个或三个“大文件”来分离出很少更改的组件，从而提高性能（例如 jquery 之类的库）和将更频繁更改的组件（app js）。因此，如果您对应用程序进行更改，第一部分仍将被缓存。当然，代价是多了一个http请求，所以YMMV和那个点。在我的应用程序中，我通常这样做：一个文件引导应用程序并需要其他文件，一个用于框架 js，一个用于应用程序 js。
当然，这真的取决于具体情况。我只是给出一个总体概述。这个想法是，您不仅有两个选项——一个大文件或将所有文件分开——还有第三个选项——一个“引导”文件，然后是其余的。您可以根据需要对其进行调整。
是的，您提到引导文件这一事实是我认为这是最佳答案的原因。