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

Question

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.

• Performance is 39/100.
• First Meaningful Paint is 15,250ms
• Perceptual Speed Index: 15,248 (target: < 1,250)
• Has enormous network payloads: Total size was 2,453 KB (target: < 1,600 KB)

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.

Answer 1

try this:

ng serve --prod --build-optimizer

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

Answer 2

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.