CODEWITHSUNDEEP
javascriptangularperformance
Hassan Kashif
Hassan Kashif

Reputation: 445

Landing page takes time to load/show

I built an Angular application. I am building a project using the below command:

ng build --env=staging --target=production --aot=false

Result: 

Hash: 7e7b9c4eecc155819498
Time: 111448ms
chunk {0} polyfills.149a820f76eebb0aa731.bundle.js (polyfills) 65.9 kB [initial] [rendered]
chunk {1} main.446a848fec514fd227a0.bundle.js (main) 1.19 MB [initial] [rendered]
chunk {2} styles.764f989c6e8171fc8bab.bundle.css (styles) 127 kB [initial] [rendered]
chunk {3} vendor.21b3dcaa9a7f0ffad906.bundle.js (vendor) 3.16 MB [initial] [rendered]
chunk {4} inline.0c2d7dbea7a8d2a649ad.bundle.js (inline) 1.45 kB [entry] [rendered]

Issue is when I deploy my application on server and load/hit the main page URL, it takes 17-18s to show. I checked the network tab. Below are the 2 main things that are taking time:

How can I reduce this time? Goal is < 5s.

Upvotes: 0

Views: 163

Answers (1)

Casimir Desarmeaux
Casimir Desarmeaux

Reputation: 11

There are a couple things you can do:

Enable Gzip If your web server allows you to make that change, Gzip will already compress the bundle.js files, resulting in smaller files to download

Enable AOT I see that you're setting it to false. You should enable it. It will precompile your code, resulting in 2 main benefits: - no Angular compiler in js files, so smaller download - no compilation done at render time, so faster rendering

The -prod option The -prod option when building will tree-shake your code. It will remove unused portions of source and library code, again resulting in smaller bundle.js files.

Bonus: Lazy Load Modules Since it's just a landing page, you most likely don't have multiple modules. But if one day you do, it's a good practice to load your modules only when required to reduce startup time.

Upvotes: 1

Related Questions