如何提高Angular2应用程序的加载性能？ [英] How can I improve load performance of Angular2 apps?
问题描述
Angular2应用程序加载缓慢，如何提高加载性能？
Angular2 app is loading slow, how can I improve the performance on load?
我使用带有html5的Angular2，typescript。
I use Angular2, typescript with html5.
目前我的应用需要4秒才能加载。
我主持Firebase并使用cloudflare。
currently my app takes 4 seconds to load. I host with Firebase and use cloudflare.
我正在做的事情/信息：
- 我压缩了图片。
- 我缩小了css
- 我缩小了js。
- 我在我的脚本上使用async。
- 我的脚本在我的。
- 脚本大约700kb
- 我使用谷歌速度测试获得65％
- 我使用了我使用的缩小版本的libs，例如bootstrap等。
- 使用systemjs。
- 这是种子应用程序即时使用： https://github.com/mgechev/angular-seed
- I've compressed images.
- I minify css
- I minify js.
- I use async on my scripts.
- My scripts are in my .
- The scripts are around 700kb
- I used google speed test and get 65%
- I used minified version of the libs I use e.g. bootstrap etc.
- Using systemjs.
- This is the seed app im using: https://github.com/mgechev/angular-seed
流程：
当应用程序加载时，它显示蓝屏（这是引导程序css），然后4秒后应用程序加载并且工作得非常快。但需要4秒钟才能加载。似乎systemjs缩小的app.js文件正在减慢整个应用程序，并且没有足够快地显示视图。
When the app loads it shows a blue screen (this is the bootstrap css) and then 4 seconds later the app loads and works really fast. But takes 4 seconds to load. It seems the app.js file that systemjs minifies to is slowing the whole app, and not showing the views fast enough.
这是我的网站速度测试：
https://www.webpagetest.org/result/161206_F5_N87/
这是我的网站：
如果您需要有关我的应用和其他任何内容的更多信息，请告诉我。我能做到。
Let me know if you need more information about my app and any other things I can do.
推荐答案
代码拆分怎么样。
来自Webpack网站：
From the Webpack site:
对于大型网络应用程序，将所有代码放入单个文件中效率不高，特别是在某些情况下只需要某些代码块的情况下Webpack有一个功能，可以将你的代码库分成按需加载的块。其他一些捆绑包称它们为层，汇总或fra gments。此功能称为代码拆分。
"For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into "chunks" which are loaded on demand. Some other bundlers call them "layers", "rollups", or "fragments". This feature is called "code splitting".
此处链接：
https://webpack.github.io/docs/code-splitting.html
请注意，Angular CLI使用Webpack。
Note that the Angular CLI uses Webpack.
另外，如果您的应用程序使用数据调用进行引导，请确保您没有阻止等待这些调用返回的组件的呈现。承诺，异步等。
Also, make sure that if your app bootstraps with data calls, that you are not holding up the rendering of your components waiting on those calls to return. Promises, async, etc.
这篇关于如何提高Angular2应用程序的加载性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
