SPA初始加载时间

Question

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

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

它目前在加载时有一个 "loading" 屏幕。但我在想这也许是个坏主意。它让我想起了一个全闪存网站 - 漂亮，但没有人愿意在第一次访问网站时观看加载旋转器。

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

但是它没有启动画面，所以加载时屏幕会跳来跳去。我不知道这比启动画面好多少。

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

与编程问题相比，这可能更像是设计师类型的问题。但这很重要，因为负载系数是不使用 SPA 的原因。

Answer 1

除了 minify css 和 html、gzip 等，由于问题有 Angular 标签，我建议您看一下 [=27 的延迟加载] =] ocLazyLoad 提供。

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

PurifyCSS 将帮助您删除未使用的 CSS 并且可以检测到动态添加的规则，例如使用 ng-class

使用像 Head.JS or 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 will help you minimize the size of your images, the same for SVG

SPA初始加载时间

SPA initial load time

angularjs

single-page-application

durandal