Angular Build Optimization: #2 | Compression
One of the main requirement for any application is to perform well & fast for its users. For a given web application, the performance depends on lot of factors such as output bundle composition, network parameters & available resources on the target machine. The size of Bundle/JS that gets to the browser is one of the parameters that can affect the performance in a significant way.
All the things explained in this article and coming one have been tried with Angular 7 & 8. Please feel free to share the feedback/queries if you get any.
I am planning this as a series of blogs to log all the experiments that will be carried out & the links can be found below.
In this post, we will continue to discuss on next strategy to reduce the bundle output size that will be served to the browser. After the application code is optimized & minified by the Angular AOT Compilation, the optimal code can further be reduced in size by compressing the output files. As most of the modern browsers now support the several compression strategies in their request & response format, we can serve the compressed outputs directly instead of build files which will reduce the load time of resources to a great extent.
Gzip & Brotli are the two popular & widely supported compression algorithms which we can employ to achieve better output size.
I will not be explaining much about the algorithms as they can be found from the below links,
The support for Gzip is explained in the below snapshot,
The support for Brotli is explained in the below snapshot,
Please note the Brotli is superior to Gzip interms of compression ration & speed. However, Brotli files are served/supported only over HTTPS.
With all the theory above, how do we get them into action in our angular project? Well, if you are using Angular CLI to build the project, the process in very straight forward. In summary we will be adding two additional post build task, each for gzip compression & brotli compression.
As you might know, the Angular CLI internally uses Webpack to do the build. Webpack refers to a config file, to execute the build tasks usually named ‘webpack.config.js’. But you might not see any such file in angular CLI generated project, because when a user types command ‘ng build — prod’, the Angular CLI takes care of preparing & executing the webpack configuration file for you! which makes it so convenient for the users as Webpack comes with a little learning curve.
So, for adding compression to build process we might have to tweak the configuration to two additional steps added. Since we cannot edit the webpack configuration file managed by angular compiler, we make use of a custom build implementation which will be a wrapper for Angular builder & lets us modify/update additional configurations or build steps. There are couple of such solutions available. Here i will be explaining the one that i have used & working quite nicely.
The plugin we can use to include custom webpack configuration is
This package lets the users add custom webpack configuration to an angular build. For it to work, please add a config file eg., ‘custom-webpack.config.js’ at the root of angular project & update the contents as shown below
Once, we have the custom webpack config file, we need to let angular CLI to use the custom builder instead of the default one. Open the angular.json & make the below changes in architect section
Once this is done, whenever we run ‘ng build — prod’, the angular builder will also include the additional webpack configuration we will update.
So, with this setup in place we can add compression by adding two webpack plugins for the process.
For gzip,
For Brotli
Please run the below command at the root of the angular project & install it
npm i -D compression-webpack-plugin brotli-webpack-plugin
Once done, please update the custom-webpack.config.js as shown below,
Thats it, run ‘ng build — prod’ & the build will generate the Build file, plus the compressed build files as well!!!!
Please try it out & share the feedback.
Next Optimization is about reducing the styles that are not used in the project. As CSS is render blocking resources, optimizing it can help in speeding up the initial load of the site/app.
