Lazy Load vs Combine/Minify vs CDN Javascript (AngularJS)

Lazy Load vs Combine/Minify vs CDN Javascript (AngularJS)

本文关键字:vs Javascript AngularJS CDN Minify Load Combine Lazy      更新时间:2023-09-26

当您想使用 CDN 加载 JavaScript 文件时,有哪些场景?以及您可能想要延迟加载哪些文件。或者,也许哪些脚本是组合和缩小的最佳候选者?

例如:

jquery + jquery 插件 - 是否应该通过 CDN 访问这些内容,或者更好地将它们组合/缩小为一个要访问的内容 只需一个请求

AngularJS模块 - 是根据需要延迟加载模块更好,还是一次将它们全部组合/缩小更好 部署,以便所有模块实际上随时可供应用程序使用

让我知道你对此的想法

这个问题有点主观,但这是我的意见。

CDN 很棒,因为:

  1. 当内容缓存在世界各地时,提供更好的性能。这将意味着从广泛位置访问的网站的延迟更低
  2. 脚本将被缓存,因此,如果我访问一个在谷歌 cdn 上使用最新稳定 Angular 的网站,然后使用相同的站点访问另一个站点,则只执行一个请求。使用 cdn 的站点越多,脚本被缓存的可能性就越高,因此应尽可能使用它们
  3. 减少服务器上的负载,从而降低成本。这对于获得大量流量的网站以及云托管网站尤其重要,因为您需要为使用的内容付费。我会说对于云,必须使用CDN
  4. 由于浏览器对每个域一次的请求数量有限制,CDN 将增加对内容的并发请求量

CDN 的问题:

  1. 对于每个脚本,需要发出单独的请求(除非缓存),因此这可以增加站点的请求总数
  2. Cdn 可能会出现故障或遇到性能问题,从而导致您的网站出现故障。如果使用 CDN,请确保在 cdn 失败时故障回复到本地版本,例如用于 Angular 检查window.angular

结合很棒,因为:

  1. 它减少了请求的数量。这在移动设备上很重要,因为移动连接具有高延迟。这也很重要,因为浏览器只能为每个域执行固定数量的请求。这也将减少服务器上的负载,因为要处理的请求较少
简而言之,当可以的话,对

常见的脚本(如angular,jquery等)使用cdns,然后对自己的自定义脚本使用组合和缩小。您应该尝试只对自己的脚本有一个请求。

如果你有大量的javascript,那么你应该考虑延迟加载你的脚本,以减少你的网站的初始加载时间。

你会发现

意见分歧..有些人喜欢将所有js文件组合在一个文件中,并在需要javascript的特定模块时加载一些文件。我更喜欢将它们全部合并到一个签名文件中。

CDN 方案则完全不同。它对于并行加载很有用。浏览器可以从服务器并行加载一些请求,因此最好将 css 和 js 文件托管在 CDN 上,以便浏览器可以将它们与 HTML 和其他文件并行加载。