Exciting news! XLTS.dev is now part of the HeroDevs never-ending support initiative. Same great product. Same great service. Read the announcement for more information!

How to efficiently serve an AngularJS app using Brotli

Jaroslaw Zolnowski
Jan 25, 2023

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!

Brotli logo

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.

Brotli browsers support

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 content encoding

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

Build files without brotli

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

Lighthouse result without brotli

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:

Example app after run in the browser

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:

Build files with brotli

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

Lighthouse result with brotli

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

Large app build files with brotli

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.

Jaroslaw Zolnowski
Jan 25, 2023