An Expert Guide Text Compression Using Brotli and Gzip-(Angular in 2023)

Hi folks, Welcome again! Hope you are doing well. I am thrilled to see you here. So today, we will talk about the compression of text-based resources in an Angular project by operating it with brotli and Gzip.

So, before talking about that part, let’s examine “What are Brotli and Gzip?”.

What is Brotli? In case you’ve never heard of it.

We can call Brotli an operation to compress the files and serve them to the user. It was discovered and developed by Google in the year 2013. 

Also known as the successor to the well-known Gzip standard.

I think there is no unique relationship between Brotli and Angular. Generally used to compress static data (like Text files). You can use it with other frontend libraries and frameworks like React or Svelte,Vue.js and more.

But since you and I are Angular lovers, we’ll learn how to compress our files with Brotli and optimize our Project.

Also, as per my information, compression algorithms can significantly improve the overall bundle size of an application by at least 50%, thereby improving performance.

You may be wondering what kind of gains to expect. On average, you can expect JavaScript files compressed with Brotli to be roughly 15% smaller, HTML files to be around 20% smaller, and CSS files are approximately 16% smaller.

How to implement Brotli in Angular Project

Here are two ways to implement Brotli in an Angular project. The First way is quick or informal to implement, but the second way is elegant. You can use any of them at your convenience.

1) The quick way

To do this, add a post-build script to your package.json file. Here’s what it looks like, and please notice that you’ll have to set the dist directory in the post-build script since your environment is different from mine.

"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’s the command used to run.

npm run build -- --prod

Once it has done with declaration and build, you’ll notice that it took every file in your build directory and created a compressed copy for that file.

This approach is speedy and has few requirements, so it might not be suitable for the environment. Because it works on the assumption that the brotli executable is already installed and available for use. It also assumes that the Project uses the NPM scripts to build the Angular Project.

2) The Elegant way

This way includes the build process, and we have to extend the builder when building the application. This allows us to add the additional plugin during the build process.

• “brotli-webpack-plugin” for Brotli files
• “compression-webpack-plugin” for our Gzip files

The first step is to run the below command to install the packages as dev dependencies.

npm install -D compression-webpack-plugin brotli-webpack-plugin

The second step is to create the webpack configuration by creating the custom-webpack.config.js file in the src directory that would run the plugins.

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

The third step is to run this install in the builder, which would allow us to add the additional webpack configuration.

npm i -D @angular-builders/custom-webpack

After that, In the angular.json file under the build, the property replaces the value of the builder property and adds a new property called options with its value as thus:

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

Once the above steps are completed, run the ng build. If it runs successfully, go into the dist/projectName folder. You should find .br and .gz versions of all .js files, which should be significantly smaller.

Now, we have implemented Brotli in Angular Project in both ways. But if you got stuck or have any concerns while doing the same, connect with me!

If you liked this blog, please share it with your friends and colleagues. Connect with FE studio on LinkedIn to read more about such topics.