To make your Angular app perform more faster, use Brotli

Here’s a fast cut that could significantly speed up how well your Angular application performs.
Frustrated with the size of your Angular app’s build?
Is your Angular application moving as slowly as a turtle weighing 250 pounds?
Does your Angular app take a long time to load?

What can you do, specifically, to enhance the functionality of your Angular app? and speed up loading? The problem with large bundle builds in Angular is prevalent. Just head over to Stack Overflow and check out the often asked Angular question,  How to decrease prod bundle size?

And practically every Angular developer finds themselves racking their brains over this Angular performance issue sooner or later.

Yes, there are several runtime optimization strategies you may think about. as maximising change detection cycles or using the trackBy function.

Then, if we wanted to go all out, we could use uglify-js to remove a few KBs from our build files. If you’re desperate enough to cut a few KBs, then give it a try. It generally works.

You may try utilising the Google Closure Compiler if you have a lot of free time. According to reports, it can reduce the size of an Angular application by 2.5 times. And if you’re interested in learning how, here’s an old piece from 2016.

However, you should plan on working for days to persuade the closure compiler to reduce the size of your Angular package for any significant commercial application.

I fully comprehend. There isn’t much time left for you to waste. You’re here to learn how to speed up the loading of your Angular application without using any unusual hacks or mysterious adjustments.
What easy tip can you utilise to improve your performance significantly, then

The key is Brotli. Use Brotli to make your Angular app load faster.

Describe Brotli, in case you are unfamiliar.

Your build files can be compressed using Brotli so that they are delivered to users as smaller files. Since its first development by Google in 2013, it has experienced significant growth.

It is also referred to as the Gzip replacement standard. To be clear, Angular and Brotli have no unique connection. Any static file type can be compressed with Brotli, as well as other frontend frameworks and libraries like React and Vue.js.

But since you and I are Angular users, we’ll learn how to use Brotli to automatically compress our build files and benefit from this.

Perhaps you’re unsure of what kind of improvements to anticipate. In general, Brotli compression results in JavaScript files shrinking by about 15%, HTML files by about 20%, and CSS files by about 16%.

How may Brotli be used in an Angular project? the quick method.

Adding a postbuild script to your package.json file is the easiest and fastest way to accomplish this. This is how it appears, and as you can see, since your environment differs from mine, you’ll need to set the dist directory in the postbuild script.

scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "postbuild": "for i in $(find dist/my-application/ -type f -print); do brotli $i; done",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

Here is the command you will enter to use it.

npm run build -- --prod

When the command has successfully finished, you’ll see that it has made a compressed copy of each file in your build directory.

And all you’ll see if you open index.html.br is a load of compressed nonsense.

This method has a few requirements, therefore your environment might not be a suitable fit. It starts out by assuming that the brotli executable is set up and accessible. Second, it presumes you’re constructing your Angular app using the NPM scripts rather than the standard ng build —prod command.

Customizing Webpack and the way it creates your Angular application is a more sophisticated strategy. Why don’t we investigate it?

How may Brotli be used in an Angular project? the appropriate way.

In a word, we’ll modify the webpack build process in order to modify the build process.

Installing the custom-webpack package is the first step. You must install the version that corresponds to your Angular version, so visit the package page and download the installation guidelines for your particular Angular version.

The second package you need to install is brotli-webpack-plugin. It’s this simple.

npm i brotli-webpack-plugin --save-dev

We now need to create a webpack.config.js in the root directory of our Angular application since we have all of our dependencies installed. It will appear as shown.

var brPlugin = require('brotli-webpack-plugin');
module.exports = {
    plugins: [
        new brPlugin({
            asset: '[path].br',
            threshold: 0,
            minRatio: 0.8,
        })
    ]
}

The angular.json file will receive our final modification. In order to use our unique webpack builder and webpack configuration file, we will configure Angular.

architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
          }
          ...
       }

And that is the more appropriate way of automatically compressing your Angular production files with Brotli.

Conclusion

And that, my friend, is how you utilise Brotli to accelerate the loading of your Angular applications. It’s the easiest and most affordable way I’m aware of to speed up your Angular application.

Also Read: Deploy An Angular Application on Google Cloud Run