5

为了尽量减少对我的服务器发出的请求数量并缩短加载时间,我正在考虑连接我所有的 JS 文件,包括供应商 js 文件,如 angular、jquery-ui、......这是一种常见的做法,但我经常查看未将其供应商 JS 文件包含在同一 JS 文件中的网站。我知道很多网站都使用 CDN 来重用其他页面可能使用过的 JS 文件的缓存版本。但是,有时,它们是在同一服务器上提供的单独供应商 JS 文件,例如在 Github 上:

Github

Github 有:

  • 包含 Modernizr、jQuery 的 Frameworks.js
  • github-...js 包含来自 Github 本身的 JS。

这样做有什么特别的原因吗?它们是否会因为您连接所有 JS 文件而出现任何问题?

4

3 回答 3

3

主要原因是尽量减少http请求的数量。在更大的项目中,如果您使用像 MV* 这样的模式,您可能希望将每个模块抽象到外部 .js 文件中。例如,这可能会导致许多文件 30-40。在这种情况下,您可能希望将其连接到单个文件中。

在一个较小的项目中,您将拥有 3-4 个 js 文件,您可以使用 then 而不连接。我使用 requirejs 将模块定义为 AMD 并将每个模块都放在外部文件中。然后我使用 requirejs 构建脚本来管理依赖和连接的部署文件。

自动化此过程的好工具

于 2013-07-31T12:56:23.987 回答
2

取决于您的应用程序如何。假设你有 20 个 0.5MB 的 js 文件。其中第一页只需要 2 (1MB)。您可能希望将它们分开并结合其他。在第一页上以延迟模式加载其他人。因此,当您了解要组合的所有内容时,组合文件会很好。作为一般规则,如果您的文件很少,那么它确实不会产生很大的影响。

在组合 javascript 文件之前应该考虑的一些事情,

当您将 100 个文件组合在一起时。您正在减少 99 个请求。但是您也在执行以下操作:
* 增加下载单个文件所需的时间(并且可能会阻止加载重要页面)
* 考虑解析我们刚刚从服务器提取的附加 JS 代码所花费的时间,此时甚至可能不需要它。javascript 引擎变得越来越快,但仍然有大量时间花费在解析 javascript 代码上。

所以,简而言之,答案是 - “它总是一个权衡游戏,了解你的代码会有所帮助”:)

http://tomdale.net/2012/01/amd-is-not-the-answer/是类似行的有趣读物。

于 2013-07-31T13:12:38.053 回答
-1

性能方面,它不会有所作为。如果您对所有框架都有一个单独的文件感到恼火,那么我想您可以做到。否则,您只会填写一个文件,并且在以后尝试更新框架时可能会遇到问题。

于 2013-07-31T12:57:24.270 回答