The bundle size is critical to a web application. Bigger bundle sizes increase the initial response time. Nrwl/nx’s build configuration offers many solutions to reduce bundle sizes, such as tree shaking/optimisation and minification, but gzip compression is not one of them by the time of this article.
Compressing and serving compressed files from our webserver can further reduce our web application’s bundle size by as much as 70% and more. It is easy to configure the Nginx server to compress files on the fly using gzip directive. However, compressing on the fly for every request costs server CPU resources, and it is a waste because we can and we should compress our files beforehand.
We can produce compressed gzip files on build for a Nrwl/Nx project, by extending Nrwl/nx’s webpack configurations and add
For a React Nrwl/nx project, steps to extending Nrwl/nx’s webpack configurations are:
add a file webpack.config.js with the below content under your app’s folder or somewhere else. The content is copied from the default configuration from Nrwl/nx and added the compression-webpack-plugin plugin.
compression-webpack-pluginto your dev dependencies in your
package.jsonfile. Note, for webpack 4.x (which is the version for nrwl/nx 12.x), the highest version of
compression-webpack-pluginyou can use is 6.1.1. Make sure you install it with your favourite package manager.
[your-app-name]/targets/buildnode to point to above file
After the above steps, rebuild your app. You should see extra .gz files are generated along with your original bundle files. Please note, if you encounter the “heap out of memory” error during the building process, try to increase the node’s memory usage globally like this “export NODE_OPTIONS= — max_old_space_size=4096” and retry.
To enable serving gzip files for a Nginx web server, just add
gzip_static on in your app’s nginx configuration file. For an Ubuntu server, the file would be
/etc/nginx/sites-enabled/[your-app-conf-file]. Then restart or reload nginx with a command like this:
sudo service nginx restart
To check, open your browser’s developer tools, open the
network tab, make sure
disable cache is enabled and refresh your app. Then inspect one of your bundle files. You should see that the downloading sizes of your bundle files are much smaller. Click one of your bundle files, and in the
Headers tab, you should see
Content-Encoding: gzip under
Response Headers section.