Question

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

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

它目前有一个＆＃34; loading＆＃34;屏幕加载时。但我想也许这是一个坏主意。这让我想起了一个全闪存的网站 - 很漂亮，但没有人想在他们第一次到达网站时观看加载微调器。

我随机发现的另一个例子是MyBestEgg.com它是一个Angular网站。没什么特别的，但是我的机器上的冷加载时间差不多是6秒。

但它没有闪光，因此屏幕在加载时会跳跃一下。我不知道这比闪屏更好。

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

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

Answer 1

除了缩小css和html，gzip等之外，由于问题有Angular标签，我建议你看一下ocLazyLoad提供的模块/ css的延迟加载。

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

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

SPA初始加载时间

1 个答案: