angularjs - SPA 初始加载时间

Question

SPA 的缺点当然是初始加载时间。

例如，我用 Durandal 创建了 AskACarPro.com。

它目前在加载时有一个“加载”屏幕。但我在想也许这是一个坏主意。它让我想起了一个全闪存网站——漂亮，但没有人愿意在他们第一次访问网站时观看加载微调器。

我随机找到的另一个例子是 MyBestEgg.com，它是一个 Angular 站点。没什么特别的，但它在我的机器上的冷加载时间将近 6 秒。

但它没有飞溅，因此在加载时屏幕会跳动一点。我不知道这比闪屏更好。

是否有处理不可避免的 SPA 加载时间的最佳实践？显然应用程序应该尽可能地被捆绑和缩小，但是在应用程序启动时总是会有延迟。

这可能更像是一个设计师类型的问题，而不是一个编程问题。然而这很重要，因为负载因素是不使用 SPA 的原因。

Answer 1

除了缩小 css 和 html、gzip 等，并且由于问题有 Angular 标签，我建议您查看模块/css 的延迟加载 ocLazyLoad优惠。

为了让你的 js 尽可能的小，你可以使用 JSInspect尽可能干燥

PurifyCSS将帮助您删除未使用的 CSS，并可以检测到动态添加的规则，例如使用 ng-class
使用像 Head.JS 这样的库或 LABjs或者像这样的脚本可以帮助您以消除页面加载期间呈现阻塞的方式加载您的 js 文件

  <script>
    [
      '@@Angular',
      '@@Angular-UI',
      '@@YourAPP',
    ].forEach(function(src) {
      var script = document.createElement('script');
      script.src = src;
      script.async = false;
      document.head.appendChild(script);
    });
  </script>

像 imagemin将帮助您最小化图像的大小， SVG 也是如此