Improve performance in an Angular app Using Brotli and Gzip Text Compression

Text compression essentially reduces the file size/payload of text-based resources, decreasing the amount of data transferred. A compressed text-based resource is delivered to your browser faster therefore text-based resources should be served with compression to minimise total network bytes.

Brotli and Gzip are compression algorithms that can significantly improve the overall bundle size of an application by at least 50% thereby improving performance. In this blog post we would look at how we can also generate Brotli and Gzip versions of our bundle so that browsers that support them can request for them or fall back to our non compressed version if they don't support it.

To achieve this in angular we have to extend the builder used when building our application for production to allow us run additional webpack plugins during the build process. The plugins needed are:

• "compression-webpack-plugin" for our Gzip files
• "brotli-webpack-plugin" for Brotli files

To implement this technique:

1. Run npm install -D compression-webpack-plugin brotli-webpack-plugin to install the packages as dev dependencies.

2. Create a custom webpack config (custom-webpack.config.js) file in your src folder that would run our plugins. Paste the following into the file.
   

const CompressionPlugin = require("compression-webpack-plugin");
const BrotliPlugin = require("brotli-webpack-plugin");

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: "gzip",
    }),
    new BrotliPlugin(),
  ],
};

1. Run npm i -D @angular-builders/custom-webpack this would install the builder that would allow us to run additional webpack configurations.

2. In the angular.json file under the build property replace the value of the builder property and add a new property called options with its value as thus:
   

...

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

....


Once the above has been completed run 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 in size.

Also note that depending on the server in which the application would be deployed some configuration might be needed to support .br files but it's good to know that most servers support them.

BONUS

This technique can applied to all text-based files for the web especially css, with the help of brotli, css files can be compressed up to 70% of its initial size because it has a large number of repeated strings which helps compression. Please note that after compressing these files "Content-Encoding: br" and "Content-Type" headers need to be set on them when deploying them to the server so that the browser understands them.

I created a javascript project that can help compress files with the brotli algorithm using webpack plugins on github. Feel free to make use of it to compress your text-based web files.

Here are some links on how to setup compression on NGINX and APACHE servers:

• Gzip on NGINX

• Brotli on NGINX

• Brotli on APACHE

Reviewed By: Sander Elias🙏🏽

Comments

[IbrahimHamad97]

Hi There.
When I try to add
"options": {
"customWebpackConfig": {
"path": "src/custom-webpack.config.js",
"replaceDuplicatePlugins": true
}
}
I get a warning saying "Property customWebpackConfig is not allowed." and when I try to run it I get an error, any idea what to change to make it work?

[Oyemade Oyemaja]

Hello, there should already be an options property, you just have to add customWebpackConfig body under it. If you can send a screenshot i can help debug better.

[Francis]

Hi,

in angular.json, try to replace

"builder": "@angular-devkit/build-angular:browser",

replace with

"builder": "@angular-builders/custom-webpack:browser",

for more info
developapa.com/angular-custom-webp...