如何提高 Angular2 应用程序的加载性能?
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.