如何提高 Angular2 应用程序的加载性能? [英] How can I improve load performance of Angular2 apps?
问题描述
Angular2 应用加载缓慢，如何提高加载性能?
Angular2 app is loading slow, how can I improve the performance on load?
我使用 Angular2，打字稿和 html5.
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.
- 我在脚本中使用异步.
- 我的脚本在我的 .
- 脚本大约 700kb
- 我使用了谷歌速度测试并获得了 65%
- 我使用了我使用的库的缩小版本，例如引导程序等
- 使用 systemjs.
- 这是我使用的种子应用程序: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:
对于大型 Web 应用程序，将所有代码放入单个文件中效率不高，特别是如果某些代码块仅在某些情况下才需要.Webpack 具有将代码库拆分为按需加载的块"的功能. 其他一些打包程序将它们称为层"、汇总"或片段".此功能称为代码拆分".
"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屋！
