将javascript放在一个.js文件中或将其分解为多个.js文件？

我的Web应用程序使用jQuery和一些jQuery插件(例如验证,自动完成).我想知道是否应该将它们粘贴到一个.js文件中,以便可以更轻松地缓存它,或者将它们分解为单独的文件,并且只包含我需要的给定页面.

我还要提一下,我关注的不仅是下载.js文件所需的时间,还包括根据加载的.js文件的内容减慢页面的速度.例如,添加自动完成插件往往会使我的基本测试的响应时间缩短100ms,即使在缓存时也是如此.我的猜测是它必须扫描DOM中导致此延迟的元素.

我认为这取决于他们改变的频率.我们来看这个例子:

JQuery:每年更换一次

第三方插件:每6个月更换一次

您的自定义代码:每周更改一次

如果您的自定义代码仅代表总代码的10%,则您不希望用户每周下载其他90%的代码.你会分成至少2个js:JQuery +插件和你的自定义代码.现在,如果您的自定义代码占完整大小的90%,那么将所有内容放在一个文件中会更有意义.

在选择如何组合JS文件(和CSS相同)时,我平衡:

文件的相对大小

预期的更新数量

常见但相关的答案:

这取决于项目.

如果您有一个相当有限的网站,其中大部分功能在网站的多个部分重复使用,那么将所有脚本放在一个文件中是有意义的.

然而,在我参与过的几个大型Web项目中,将通用站点范围的功能放在一个文件中并将更多特定于部分的功能放入自己的文件中更有意义.(我们在这里讨论大型脚本文件,针对几个不同的Web应用程序的行为,所有这些都在同一个域下提供.)

将脚本拆分为单独文件的好处是,您不必为用户提供不使用的不必要内容和带宽.(例如,如果他们从不访问网站上的"App A",他们将永远不需要"App A"部分的100K脚本.但他们需要通用的站点范围功能.)

将脚本保存在一个文件中的好处是简单.服务器上的点击次数减少.用户下载次数减少.

像往常一样,YMMV.没有严格的规则.根据用户的用途,根据项目的结构,为用户做最有意义的事情.