Frustrated with the build size of your app?

The size of the files downloaded by the browser negatively affects application performance. This is evident when the page is loaded into the browser. A larger bundle increases loading time and can delay the Largest Contentful Paint, cause Cumulative Layout Shifts, and increase First Input Delay, Total Blocking Time, and Time to Interactive. Slow readings in those metrics quantify poor user experiences and can result in SEO penalties.

Keeping your pages as light as possible ensures every visitor has the best chance for a great experience.

In today's front-end frameworks, there are many ways to optimize performance and improve the metrics above, such as Lazy-loading , Image-optimization, SSR, or internal mechanisms of a given framework, like Tree-shaking in the case of Angular. It usually works. Give it a whirl if you're desperate enough to slice a few KBs.

Brotli, to the rescue!

What is Brotli?

Brotli is a way to compress your build files and serve them to your users as smaller files. There is no particular dependency between any of the front-end frameworks and Brotli. You can compress any static files and in combination with any front-end library or framework.Check RFC7932 to get more detailed information.

This article will show how to integrate Brotli with Webpack in a simple AngularJS-based application.

Why we should use Brotli

"The smaller compressed size allows for better space utilization and faster page loads. We hope that this format will be supported by major browsers in the near future,as the smaller compressed size would give additional benefits to mobile users, such as lower data transfer fees and reduced battery use."

– Zoltan Szabadka, Software Engineer, Compression Team

Brotli Compression support

Currently, almost every modern browser supports Brotli.

Similarly, most web servers, including:

• Firebase Hosting
• Apache HTTP Server – through mod_brotli (for release after 2.4.26)
• Nginx – ngx_brotli (provided by Google)
• Node.js - through shrink-ray module LightSpeed (since version 5.2)
• Microsoft IIS - through IIS-brotli the extension (for IIS 7.5 and above)

How to use Brotli?

The first step is to install the brotli-webpack-plugin along with the compression-webpack-plugin package.

Then we can use the installed plugins in the webpack configuration as follows:

new BrotliPlugin({
  asset: '[fileWithoutExt].[ext].br',
  test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/,
}),
  new CompressionPlugin({
    filename: '[path][base].br',
    algorithm: 'brotliCompress',
    test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/,
    threshold: 10240,
    minRatio: 0.8,
    deleteOriginalAssets: false,
  });

Once the application is built, we can run it using a simple web server, for example, http-server:

http-server -p 4200 -c-1 -b

Note that the -b flag when enabled, will give .br instead of .js when there is a brotli compressed version of the file.

Brotli in action

Let's step back to the built application without using compression. The dist folder contains the created and production-optimized files:

• index.html - 515B
• main.css - 455B
• main.js - 356kB

Running the application, using http-server, and examining its performance with the lighthouse tool, we see that it ranks at 94%:

The comments listed in red indicate that we can save 1.2s or 1.05s by "enabling text compression" and "reducing unused JS" respectively. This is an excellent result, and we could assume that the application does not need any improvements. However, remember that the entire application displays three lines of text. It is very lightweight and low-dependency:

Let's build the same application using Brotli compression. Additional files with the extension .br have been generated in the dist folder. These are production files compressed with Brotli, which we can use if the server supports them. As we can see, the resulting bundle is 2.5x smaller than without compression:

After running the lighthouse tool, we see that the performance level has risen to 99%, and all the red comments have disappeared:

Testing Brotli on much more extensive applications, I noticed that the resulting bundle size is as much as 5x smaller than without compression:

Conclusion

Brotli compression bases its technology on the same foundation as GZIP but includes some performance-enhancing benefits. It is the fastest and cheapest way to make your application load faster. And most importantly, Brotli is not tied to any particular framework. It will also work great for Angular, React, or Vue applications.

Hopefully, the bundle compression option will soon be natively supported by the most popular build tools.

You can see the source code of the sample application in this GitHub repository.

FAQ

Updated: March 5, 2024

The first high-severity CVE since AngularJS End of Life has been officially reported. For AngularJS Never-Ending Support (formerly XLTS) clients, we found this CVE last year and issued a fix immediately. For all others, as Google’s official AngularJS long-term support partner, we encourage you to either:

1. Migrate off of AngularJS, or
2. Contact HeroDevs about how you can keep your AngularJS environment secure, compliant, and compatible indefinitely.