一个大的javascript文件或多个较小的文件？

Question

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

Answer 1

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

我个人的偏好是有三个"小组"的JavaScript文件:

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

为什么不使用像 Browserify 这样的东西将所有内容捆绑在一起并为每个页面/页面模板提供单个 JS 文件。通过这种方式，您可以选择开发中每个模板所需的模块，并将其捆绑到一个缩小的文件中。 (2认同)
没有重复的代码，每个文件都可以单独缓存在 ServiceWorker 中。这是不好的做法吗？ (2认同)

Answer 2

一个大文件.你应该在生产代码时缩小代码并在代码很大时对其进行压缩.您希望尽可能少地向服务器发出请求以提高页面性能

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

Answer 3

一个大文件或两个文件:一个小文件和一个大文件.要明确的是,在开发过程中,有好的单独文件 - 可能使用requireJS之类的东西.但是当你部署它时,最好压缩一个文件中的所有内容,以减少HTTP延迟和请求.

我提到了两个文件.在某些情况下,可能有一个小文件,它负责"引导"操作,同时"大文件" - 特别是如果它真的很大 - 下载.这对于第一次访问尤其有用,因为用户尚未缓存您的文件.

Answer 4

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

也就是说,最好给用户一个压缩文件,以便可以轻松缓存所有内容,这也减少了页面请求的数量.例如,Rails 3在资产管道中自动执行此操作.您可以编写一个脚本来运行您喜欢的压缩器.但是你不应该为此牺牲代码的可读性 - 你可以吃蛋糕并吃掉它!