8

是否需要将优化应用于 Angular CLI Hello World 或者这是一个有效的“性能”结果？

在将 Lighthouse 应用于我们的实时 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 -> 审核 -> 运行 Lighthouse。

  • 性能为 39/100。
  • 第一次有意义的绘制是 15,250 毫秒
  • 感知速度指数：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 也不用于生产用途。但这允许我在发布之前在我的本地主机上进行测试。

4

3 回答 3

8

尝试这个：

ng serve --prod --build-optimizer

build-optimizer 标志是建立在 CLI 之上的一种新的 tree-shaking 方法。

于 2017-09-06T21:19:22.480 回答
3

ng serve并不是要完全优化，而是要快速显示您的项目以进行测试。如果您想要优化版本，您必须运行ng build --prod以生成文件，然后您必须托管这些文件。对此进行测试，它会运行得更快。

于 2017-09-06T21:41:11.793 回答
1

创建 PWA 后ng new <your app's name> --service-worker，最好的 Lighthouse 审计结果来自以下方面：

  1. 使用优化构建应用程序

    ng build --prod --build-optimizer

  2. 使用 https 将其托管在某个地方以利用 HTTP2。例如对于 firebase（您需要一个帐户）：

    npm install -g firebase-tools

    firebase login

然后在你的根目录（通常在 src 和 dist 上面的那个）

firebase init

在那里，选择

托管：配置和部署 Firebase 托管站点

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

你想用什么作为你的公共目录？

类型dist。

然后

firebase deploy
  1. 访问上一个命令返回的 url，并在那里进行审计。

您通过审核ng serve (or npm start) 的输出得到的结果并不具有代表性，因为它侧重于编译速度和调试的难易程度。

于 2018-04-26T15:34:54.810 回答