javascript - 如何提高 Angular2 应用程序的加载性能？

Question

Angular2 应用程序加载缓慢，如何提高加载性能？

我使用 Angular2，带有 html5 的 typescript 。

目前我的应用程序需要 4 秒才能加载。
我使用 Firebase 托管并使用 cloudflare。

我正在做的事情/信息:

我压缩了图片。

我缩小了 css

我缩小了js。

我在我的脚本上使用异步。

我的脚本在我的 .

脚本大约 700kb

我使用谷歌速度测试并获得 65%

我使用了我使用的库的缩小版本，例如 bootstrap 等

使用 systemjs。

这是我使用的种子应用程序:https://github.com/mgechev/angular-seed

流量:

当应用程序加载时，它显示蓝屏(这是引导 css)，然后 4 秒后应用程序加载并运行得非常快。但是加载需要4秒。 systemjs 缩小到的 app.js 文件似乎减慢了整个应用程序的速度，并且显示 View 的速度不够快。

这是我的网站速度测试:
https://www.webpagetest.org/result/161206_F5_N87/

这是我的网站:

https://thepoolcover.co.uk/

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

Answer 1

“代码拆分”怎么样。

来自 Webpack 站点:

“对于大型 Web 应用程序，将所有代码放入单个文件中效率不高，特别是如果某些代码块仅在某些情况下才需要。Webpack 具有将代码库拆分为按需加载的“块”的功能。其他一些打包器将它们称为“层”、“汇总”或“片段”。此功能称为“代码拆分”。

链接在这里:

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

请注意，Angular CLI 使用 Webpack。

此外，请确保如果您的应用程序通过数据调用进行引导，则您不会阻止组件的渲染等待这些调用返回。 promise ，异步等。