由Lighthouse测量的Hello World Angular CLI(为什么慢而且巨大?)

时间:2017-09-06 20:41:16

标签: angular angular-cli lighthouse

是否需要对Angular CLI Hello World应用优化,或者这是一个有效的"性能"结果吗

将Lighthouse应用于我们的live angular 4项目时,我们将与Angular CLI Hello World进行比较。

来自控制台:

npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve --prod

在Chrome中 - > F12 - >审核 - >跑灯塔。

  • 效果为​​39/100。
  • First Meaningful Paint是15,250ms
  • 感知速度指数:15,248(目标:<1,250)
  • 拥有巨大的网络负载:总大小为2,453 KB(目标:<1,600 KB)

更新1

转到@Moshe,使用:

ng serve --prod --build-optimizer

给出以下内容:   - 性能为96/100。   - 第一个有意义的油漆是2,040毫秒   - 感知速度指数:2,054(目标:<1,250);等级92/100

最终难以形成一个单一,简明的问题。我理解ng serve不适合生产使用,即使使用ags ..但这允许我在发布之前在我的localhost上进行测试。

3 个答案:

答案 0 :(得分:6)

试试这个:

ng serve --prod --build-optimizer

build-optimizer标志是一种在CLI之上构建的新的树形抖动方法。

答案 1 :(得分:3)

ng serve并非完全优化,它旨在快速显示您的项目以进行测试。如果您需要优化版本,则必须运行ng build --prod来生成文件,然后您必须托管这些文件。对此进行测试,它会更快地运行。

答案 2 :(得分:0)

使用ng new <your app's name> --service-worker创建PWA后,最佳灯塔审核结果来自以下内容:

  1. 使用优化构建应用

    ng build --prod --build-optimizer

  2. 使用https将其托管在某处以利用HTTP2。 For example for firebase(您需要一个帐户):

    npm install -g firebase-tools

    firebase login

  3. 然后在你的根目录(通常是src和dist之上的那个)

    firebase init
    

    在那里,选择

      

    托管:配置和部署Firebase托管网站

    将其添加到firebase项目中,当您被问及公共目录时

      

    您想将什么用作公共目录?

    输入dist

    之后

    firebase deploy
    
    1. 访问上一个命令返回的url,然后在那里进行审核。
    2. 审核ng serve输出后的结果 (或npm start),不具代表性,因为它侧重于编译 速度和调试的简便性。