CODEWITHSUNDEEP
angularangular-clilighthouse
ttugates
ttugates

Reputation: 6291

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

Do optimizations need to be applied to the Angular CLI Hello World or is this a valid "performance" result?

In applying Lighthouse to our live angular 4 project, we compared to the Angular CLI Hello World.

From console:

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

In Chrome -> F12 -> Audits -> Run Lighthouse.

Update 1

Thx to @Moshe, using:

ng serve --prod --build-optimizer

Gave the following: - Performance is 96/100. - First Meaningful Paint is 2,040ms - Perceptual Speed Index: 2,054 (target: < 1,250); Grade of 92/100

Ultimately had a difficult time forming a singular, concise question for this. I understand ng serve is not for production use, even with ags.. But this allows my to test on my localhost before publishing.

Upvotes: 8

Views: 2973

Answers (3)

RaidenF
RaidenF

Reputation: 3531

After creating a PWA, with ng new <your app's name> --service-worker, the best Lighthouse audit result comes from the following:

  1. Build the app with optimizations

    ng build --prod --build-optimizer

  2. Host it somewhere with https to take advantage of HTTP2. For example for firebase (you need an account):

    npm install -g firebase-tools

    firebase login

And then at your root directory (the one above src and dist usually)

firebase init

There, select

Hosting: Configure and deploy Firebase Hosting sites

Add it to a firebase project, and when you are asked about the public directory

What do you want to use as your public directory?

type dist.

Afterwards

firebase deploy
  1. Visit the url that the previous command returns, and audit there.

The result that you're getting from auditing the output of ng serve (or npm start), is not representative, as it focuses on compilation speed and ease of debugging.

Upvotes: 1

Joo Beck
Joo Beck

Reputation: 1913

ng serve is not meant to be completely optimized, it is meant to be a quick display of your project for testing. If you want the optimized version you have to run ng build --prod to generate the files, and then you have to host those files. Do a test on that and it will run much quicker.

Upvotes: 3

Moshe
Moshe

Reputation: 2684

try this:

ng serve --prod --build-optimizer

build-optimizer flag is a new tree-shaking method built on top of the CLI.

Upvotes: 8

Related Questions