Optimize Angular bundle size in 4 steps

Have a long initial page loading time? check this out.

Photo by Aron Visuals on Unsplash

AngularInDepth is moving away from Medium. This article, its updates and more recent articles are hosted on the new platform inDepth.dev

Have your web app ever been complained about taking too long to load? Have you ever been given a task to “optimize performance” of the slow app? There are tons of topics about improving your app’s performance, such as lazy loading, change detection, server side rendering, etc. One of the topic I want to talk about here, is optimizing Angular bundle size. It’s extremely easy and useful.

Step 1: Know your Bundle Size

It’s hard to deny that initial page loading time is tightly connected with your Angular app bundle size.

By running ng build --prod you will see the bundles size of the files the browser would get from your server.

What size is considered good or bad?

Usually among those 4 files in the image above, only main.*.js is likely to go big or crazy. I checked many apps built with Angular and have a feeling that most medium size enterprise apps should have main.*.js under 500 KB, on average 250KB. If your bundle size largely exceed those numbers, you may need to be aware. If your bundle size is under this number, you may still want to optimize it further.

Step 2: Are your files gzipped?

Generally speaking, gzipped file has only about 20% the size of the original file, which can drastically decrease the initial load time of your app.

To check if you have gzipped your files, just open the network tab of developer console. In the “Response Headers”, if you should see “Content-Encoding: gzip”, you are good to go.

If you don’t see this header, your browser will load the original files. For example, for the Angular bundle in the image below, the browser will load main.0d17aff85f337483317e.js and cost 2.21MB data. However, if you gzip your file, your browser could only load 495.13KB. Such a huge reduction of file size, will obviously reduce the initial page loading time, especially when user has low internet speed.

How to gzip?

If you host your Angular app in most of the cloud platforms or CDN, you should not worry about this issue as they probably have handled this for you. However, if you have your own server (such as NodeJS + expressJS) serving your Angular app, definitely check if the files are gzipped.

The following is an example to gzip your static assets in a NodeJS + expressJS app. You can hardly imagine this dead simple middleware “compression” would reduce your bundle size from 2.21MB to 495.13KB.

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

Gzip is not the only way to compress, Brotli is also an option.

Step 3: Analyze your Angular bundle

If your bundle size does get too big you may want to analyze your bundle because you may have used an inappropriate large-sized third party package or you forgot to remove some package if you are not using it anymore. Webpack has an amazing feature to give us a visual idea of the composition of a webpack bundle.

It’s super easy to get this graph.

1. npm install -g webpack-bundle-analyzer
2. In your Angular app, run ng build --stats-json (don’t use flag --prod). By enabling --stats-json you will get an additional file stats.json
3. Finally, run webpack-bundle-analyzer path/to/your/stats.json and your browser will pop up the page at localhost:8888. Have fun with it.

You may be surprised,

a) that you forgot to remove some packages you are not using anymore and/or

b) that some packages are way larger than expected and could be replaced with another one and/or

c) that you have improperly imported some libraries (For example, 80% of moment.js is just locale data which is probably not needed) so that you have some direction to look for an answer.

Step 4: Monitor your bundle size

In Angular 7 and later, when you generate a new app with ng new, in angular.json, you can find a configuration like:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  }
]

This will give you a warning if you build Angular and the bundle size exceeds 2MB and throw an error if the bundle size exceeds 5MB. You can adjust the numbers as per your need.

You can leverage this feature in your CI/CD pipeline. If you see the warning/error, you may want to investigate what’s going wrong.

Other ways to reduce bundle size

If your bundle size does get too big because of your app is as big as Facebook, you should really use lazy-loading. This topic is widely covered by the Angular community, so I won’t spread it out here.

Thanks to:

Thank Tsung-Ting Chen for giving me inspiration of this article and help me coming up with the solution.