Angular2应用程序加载缓慢,如何提高加载性能?

我在html5中使用Angular2和typescript.

目前,我的应用程序需要4秒才能加载. 我使用Firebase托管,使用CloudFlare.

Things I'm doing / info:

  • 我压缩了图像.
  • 我缩小css
  • 我缩小了js.
  • 我在脚本中使用async.
  • 我的脚本在我的.
  • 脚本大小约为700kb
  • 我用谷歌速度测试得到65%
  • 我使用了我使用的LIB的缩小版,例如 bootstrap 等.
  • 使用systemjs.
  • 这是我使用的种子应用程序:https://github.com/mgechev/angular-seed

Flow:

当应用加载时,它会显示一个蓝屏(这是 bootstrap css),然后4秒钟后,应用加载并运行得非常快.但加载需要4秒钟.似乎是应用程序.systemjs缩小到的js文件正在减慢整个应用程序的速度,并且显示视图的速度不够快.

This is my website speed test: https://www.webpagetest.org/result/161206_F5_N87/

This is my website:

https://thepoolcover.co.uk/

如果您需要有关我的应用程序以及我可以做的任何其他事情的更多信息,请告诉我.

推荐答案

"代码拆分"怎么样.

从网页包网站:

"对于大型网络应用来说,把所有代码放到一个文件中效率不高,特别是当某些代码块只在某些情况下才需要时.webpack有一个功能,可以将代码库拆分成按需加载的"块".其他一些Bundle 包称它们为"层"、"汇总"或"片段".这种功能被称为"代码拆分".

链接如下:

https://webpack.github.io/docs/code-splitting.html

请注意,Angular CLI使用Webpack.

此外,如果您的应用程序使用数据调用进行 bootstrap ,请确保不会阻碍组件的呈现,以等待这些调用返回.promise 、异步等.

Angular相关问答推荐

HTTP Get请求未发送到提供的URL

添加@ nx/webpack插件 destruct 了Nativescript构建

如何在Angular中执行一个操作条件为多个可观测值?

截取提取后端S获取添加授权头的请求

HTTP POST响应失败Angular 16

HTTP拦截器在Angular 17项目中不起作用

阶段JS画布覆盖 bootstrap 模式

如何修复不允许的HttpErrorResponse 405?

RxJs 中的空闲可观察对象在幕后做了什么?

如何 use/import http模块?

如何在两个模块之间共享服务 - @NgModule 在Angular 而不是在组件之间?

即使 withCredentials 为真,Angular 也不会发送在 Set-Cookie 中收到的 Cookie

Angular CLI 自定义 webpack 配置

什么是 Angular 4,我可以从哪里了解更多信息?

Angular-CLI 代理到后端不起作用

Angular - 是否有 HostListener-Events 列表?

Angular 2 Material 2 日期 Select 器日期格式

如何在Angular中使用带有 td 属性 colspan 的属性绑定?

NPM 脚本 start退出,但未指示 Angular CLI 正在侦听请求

如何在 Angular 中使用带有 SASS 的 Bootstrap 4