Hello World Angular Lighthouse 测量的 CLI（为什么又慢又大？）

Question

是否需要对 Angular CLI Hello World 应用优化，或者这是一个有效的 "performance" 结果？

在将 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。

更新 1

感谢@Moshe，使用：

ng serve --prod --build-optimizer

提供以下内容： - 性能为 96/100。 - 第一次有意义的绘画是 2,040 毫秒 - 感知速度指数：2,054（目标：< 1,250）；等级 92/100

最终很难形成一个单一的、简洁的问题。我知道 ng serve 不适用于生产用途，即使使用 ags 也是如此。但这允许我在发布之前在我的本地主机上进行测试。

Answer 1

试试这个：

ng serve --prod --build-optimizer

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

Answer 2

ng serve并不意味着完全优化，它旨在快速展示您的项目以供测试。如果你想要优化版本，你必须运行 ng build --prod 来生成文件，然后你必须托管这些文件。对此进行测试，它运行会快得多。

Answer 3

创建 PWA 后，使用 ng new <your app's name> --service-worker，最好的 Lighthouse 审核结果来自以下内容：

通过优化构建应用程序

ng build --prod --build-optimizer
使用 https 将其托管在某个地方以利用 HTTP2。 For example for firebase（您需要一个帐户）：

npm install -g firebase-tools

firebase login

然后在你的根目录下（通常在 src 和 dist 之上）

firebase init

那里，select

Hosting: Configure and deploy Firebase Hosting sites

将其添加到 firebase 项目中，当系统询问 public 目录时

What do you want to use as your public directory?

输入dist.

之后

firebase deploy

您从审核 ng serve 的输出中获得的结果（或npm start），不具有代表性，因为它侧重于编译调试的速度和便利性。

Hello World Angular CLI as Measured by Lighthouse(Why slow and enormous?)