Question

我已经构建了许多角度应用程序，每次我尝试提高应用程序性能，架构......等等。

有些人遵循的一个策略是将一个缩小文件中的所有JavaScript文件连接起来，并将一个缩小文件中的所有样式表文件连接起来，但这与lazyload概念相反，例如angular oc lazyload 以这种方式加载状态文件：

//inject dependency
var myApp = angular.module("MyApp", ["oc.lazyLoad"]);

//load file
myApp.controller("MyCtrl", function($ocLazyLoad) {
  $ocLazyLoad.load('testModule.js');
});

问题是哪种模式可以提供更好的性能连接或延迟加载？

Answer 1

取决于您的申请规模。如果它很小 - 将所有js文件连接成单个文件就足够了，并将其缩小。如果您有大型模块化应用程序，则有可能某些百分比的用户无法访问所有模块，在这种情况下，将单个js文件拆分为某些块会更好，并且在加载时会延迟加载需要的。

Answer 2

答案取决于您正在构建的应用程序。但我会向你解释差异，以便它可以帮助你做出决定。

连接到单个文件的优点

它肯定会提高您的应用程序速度（除非您第一次获得缓存优势）
它将减少对服务器或托管静态资源的静态服务器的请求数。

延迟加载的优势

与之前相比，初始页面加载速度会更快，但是当用户使用您的应用时会出现延迟，因为您将按需加载资源（对于某些类型的应用程序，这可能不适合用户体验）。
最初会帮助您减少对服务器的请求数量，但是当用户正在使用该应用程序时，它必须逐个下载所有资源。

所以最后我更喜欢First选项。

希望这可以帮助你：）

Angular Best Practice：Lazyload vs Concatenation

2 个答案: