Search code examples
angularbuildcompressiongzipiis-10

Angular build compression with gzip

How can I reduce my angular build size. I'm not sure how can I, should I use gzip for that?

Right now my main concern is how can I reduce my main.js file here is the build screenshot - https://snipboard.io/LkJMSe.jpg, as my website is taking around 60-70 seconds to load here is total time to load main.js - https://snipboard.io/xGyRi0.jpg. I'm using a windows VPS with IIS 10 on it.

I'm not sure how can I do that I.

Thank you

Solution

  • Gzip will not interfere with Angular Build process. It is a built-in feature in IIS. Enabling GZip in IIS is simple, just check the below options in IIS Compression module. enter image description here
    If there is no Compression module in IIS, please enable it in the Windows Features.
    enter image description here
    Please refer to the official documentation.
    https://learn.microsoft.com/en-us/previous-versions/windows/it-pro/windows-server-2012-R2-and-2012/hh831370(v=ws.11)?redirectedfrom=MSDN
    After enabling it in the website of the IIS, we could open the network tab of developer console to verify it, in the “Response Headers”, the Content-Encoding field will have “GZip” sign.
    enter image description here
    Besides, there are also other ways to reduce the bundle size, such as Lazy-loading, which is mentioned in the below blog.
    https://medium.com/angular-in-depth/optimize-angular-bundle-size-in-4-steps-4a3b3737bf45
    https://angular.io/guide/lazy-loading-ngmodules