Angular 2初始化速度很慢

时间:2016-11-24 19:45:25

标签: performance angular initialization typescript2.0

任何人都可以帮助我吗?

My Angular 2应用程序需要很长时间才能初始化。

只有16个请求。 尽管3 mb的尺寸相对较大,但问题不在于带来文件。

我指的是获取所有文件后的时间。

在我的笔记本上是3到4秒,我认为这是一个很长的时间,因为我现在只有10个组件,1个管道和6个指令。

这个想法是应用程序有近200个组件。 然后我将创建延迟加载。

但对于10个组件,我认为它应该更快。 在手机上,待机时间达到10,12秒。 在iPad上,等待也相对较大。 超过15秒。

我正在使用webpack,缩小css和js。 甚至在服务器上使用预渲染(asp.net核心)。

下载所有文件后会发生此延迟。 也就是说,渲染屏幕是一个角度2处理时间。

我还能做什么? 我怎么可能做错了?

测试链接: http://projetos.codegenerator.com.br/angular2/

感谢。

3 个答案:

答案 0 :(得分:2)

我认为您没有使用任何捆绑工具,例如webpack,systemjs ..

部署ng2-app时,应该使用AOT(提前)编译。 我猜你正在使用JIT(及时)编译。

在angular2指南页面,

  

使用AOT,浏览器会下载应用程序的预编译版本。浏览器加载可执行代码,以便它可以立即呈现应用程序,而无需先等待编译应用程序。

当您使用JIT编译时,您的浏览器将下载由angular2编译器定义的vendor.js,它将及时编译您的应用程序。它太慢了,客户端必须下载供应商文件。当您使用AOT时,您不必使用供应商文件,因此资源更小。

我建议在部署应用程序时使用AOT编译,并对资源大小使用延迟加载。

如果您对ng2 AOT编译感到好奇,请阅读本指南。

angualar2-cookbook-AOT

这是带有webpack2和延迟加载的示例angular2 app。

在这里使用文件结构和配置文件。

当我使用示例应用程序进行测试时,与aot捆绑在一起的文件小于500KB。

angular2-webpack2-aot

答案 1 :(得分:1)

Angular 2在性能方面经过了充分测试,如果在应用程序及其依赖项上存在任何滞后现象......

检查您的环境,如果只有很少的组件,那么框架方面没有任何问题。

Webpack或任何其他构建工具与性能无关,因为它们是开发依赖项,

如果您使用cdn用于某些第三方服务或图书馆,请检查他们的服务是否准时。

答案 2 :(得分:1)

我终于在应用程序中获得了我想要的性能。 它需要一些工作,但确实值得。

将您的应用程序配置为在AOT中编译,实际上性能提升是值得的。