用Angular2编写的单页应用程序加载缓慢吗？答案

【问题标题】：Does single page application written in Angular2 load slowly?用Angular2编写的单页应用程序加载缓慢吗？
【发布时间】：2016-12-27 00:08:59
【问题描述】：

当我在阅读一本关于 Angular2 的书时，我发现了一段说我们可以通过 Angular2 的伴侣来创建 SPA。据我了解，单页应用程序就是这样一个网站，它主要在客户端运行，只在需要时对服务器进行一些异步调用。

问题是，然后我阅读了关于 Angular2 中路由的一章，我想出了一个想法，当我们有很多路由时，浏览器必须加载所有组件以及所有不同路由的静态资产，当我们去一个根路径，所以它必须真的减慢页面加载，对吗？

如果我的猜测不正确，请解释一下。

【问题讨论】：

第一个页面加载会更慢（因为它需要加载代码以使其表现得像 SPA），但第二/第三/等页面加载应该更快，因为它不应该需要从服务器获取尽可能多的（如果有的话）信息。您可以使用服务器端渲染来帮助加快第一个页面的加载速度。
@therobinkim 怎么可能在几次之后加载速度更快？ Angular2 是否强制加载的代码保留在缓存中？
不，我的意思是：在 SPA 中，加载 index.html 将比多页应用程序花费更长的时间......但从 index.html 到 about.html 将花费更少的时间， bc 只有一些新代码需要从服务器获取，只有一些浏览器需要重新渲染，等等。我不是指一遍又一遍地刷新index.html。
因此，当用户转到根路径时，Angular2 会加载所有静态资产以及所有不同路由的所有组件代码，还是会在需要时异步获取数据？
我认为 Webpack 可以处理这个问题（我相信这是 angular-cli 的一部分）angular.io/docs/ts/latest/guide/webpack.html

【解决方案1】：

第一次加载应用程序需要一些时间（如果你正确地捆绑了东西，应该不会花太多时间），因为你实际上将所有应用程序加载到客户端（组件、服务文件、路由器等... )。

加载所有内容后，它会更加高效和快速，因为所有内容都已经存在：您无需调用服务器来获取数据，然后将其显示回客户端，Angular2 会动态加载和卸载基于您的应用程序的模板（借助路由器等）。

唯一可能需要一些时间的是当您需要调用服务器时：Http Calls 等等。如果没有正确完成，这些可能会减慢数据在您的应用上的显示方式。

总体而言，就用户体验而言，它要好得多，因为所有内容都是即时加载的，并且在您的应用程序中导航感觉更加顺畅。

【讨论】：

我完全理解 SPA 在您使用它之前会加载所有需要的资产和资源。这有很多好处和优势，但是如果您只是在登录页面上并且您还不确定是否登录。您需要加载所有资源吗？我的意思是，如何使登录页面不加载所有资源，并且一旦通过身份验证，即是应用加载所有所需资源的时间。
您可以延迟加载模块，以便仅在需要时加载它们。这会增加一些延迟，因为您将不得不等待延迟加载的资源。