加载页面时缓慢的Angular应用程序

时间:2018-07-31 08:34:11

标签: javascript angular typescript webpack angular-cli

我已经很长时间看到这个问题了,并在网上搜索了一些解决方案,但是我认为我没有使用正确的术语来识别问题。

运行package.json时,我的$ npm start中有以下命令

ng serve --host 0.0.0.0 --disableHostCheck --proxy-config proxy.dev.json --extract-css --show-circular-dependencies false

当我使用“ npm start”启动我的应用程序时,一切似乎都可以正常工作,但是在看到“ webpack:成功编译”之后,要花很长时间(7-8秒)才能真正看到页面或加载屏幕(发生HTTP调用时显示一个微调按钮。

我很好奇在编译成功和显示页面之间会发生什么。编译成功后,我会在7-8秒内看到空白页。

一旦显示该页面,并且我通过菜单导航到另一页面,所有内容都会立即显示。但是,当我手动更改URL并按Enter键时,加载页面需要7-8秒。

这种情况发生时,我的控制台,“网络”选项卡或任何其他内容都没有任何活动……我能检查一下以确认没有响应的“空白”吗?

也许值得一提,在ng build --prod之后使用Apache为应用程序提供服务时,我看不到这个问题。

Angular版本5.2.11 Angular-CLI 1.7.4

网络标签 enter image description here

“性能”标签 enter image description here

1 个答案:

答案 0 :(得分:0)

  

我很好奇在编译成功和编译之间会发生什么   显示页面。编译成功后,我看到一个空白页   持续7-8秒

您的浏览器需要下载应用程序的捆绑包,该捆绑包必须很大,具体取决于您加载7-8秒的时间。 $ ng serve时,默认情况下,您会在开发模式下生成捆绑包,这意味着捆绑包的尺寸为原始大小,因此与生产中的捆绑包相比,捆绑包的尺寸必须大模式。

在生产模式--prod中,捆绑软件已缩小,因此体积很小,这意味着下载捆绑软件所需的时间更少。

注意:

如果要注意此行为,请在浏览器中打开控制台并移至“网络”选项卡,以查看您的浏览器正在下载的捆绑软件以及所需的时间。