Improve Angular performance with Gzip compression on Azure Storage
This post is about improving Angular application performance with the help of GZip encoding when hosting the application in Azure Blob Storage.
Long back I wrote a few blog posts on how to create simple static websites using Azure Blob service and Deploying Angular Application to Azure Storage. Recently I faced an issue. One of the Angular application I am running from the Blob storage is taking some time to load. I looked into the network tab and I found the Angular application size is little big - one of the generated file is around 4MB and it is taking some time to download the file. After discussing with the team I found we can introduce Lazy Loading feature in Angular and fix this issue - which we need to modify the source code and requires some effort. Other option I found was using GZip encoding. For demo purposes I am using a simple Angular application - not the real one.
So I created a Angular application and hosted it on Azure Storage Account with Static website feature. And then I build the app using
ng build command. Here is the output of the command.
And I deployed it using Storage Explorer. And when I am browsing the app, I will be able to see something like this. If you notice the Content Encoding column - it is empty.
Next we will GZip the files and deploy it again. For GZip I am using a utility called
gzipper. I am installing it as using
npm install -g gzipper. And I am modifying the
package.json and adding one more command under
scripts, like this.
build-compress command, I am calling the
ng build which will compile the Angular files to the
dist folder. Then I am running the
Next I am running the command
npm run build-compress which will build and compress files - which later can be deployed to the storage account.
And if we compare the file sizes of generated files, we will see some difference. To know the exact size - how much compressed, we can use the -v flag in the
We can deploy the files using Storage Explorer again. But if we run the application without any change - it may not render properly because the browser didn’t understand the file encoding. To fix this issue, you need to set the Content-Encoding property of the file to
GZip. Here is the screenshot - where I am setting the content encoding using storage explorer.
We need to do it for all the files - JS, CSS and HTML files. Next refresh the app and we will be able to see the network tab.
Happy Programming :)