Optimize Angular bundle size in 4 steps

Post Editor

In this article we will learn about how to optimize Angular bundle size in 4 steps.

4 min read
post

Optimize Angular bundle size in 4 steps

In this article we will learn about how to optimize Angular bundle size in 4 steps.

post
post
4 min read

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

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
Link to this section

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.

Content imageContent image

What size is considered good or bad?
Link to this section

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?
Link to this section

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.

Content imageContent image

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.

Content imageContent image

How to gzip?
Link to this section

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.

<>Copy
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
Link to this section

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.

Content imageContent image

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.
Content imageContent image

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
Link to this section

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

<>Copy
"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
Link to this section

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:
Link to this section

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

Share

About the author

author_image

About the author

author_image
Looking for a JS job?
Job logo
Senior Frontend Software Engineer (Angular)

Argument

Ukraine
Remote
$54k - $72k
Job logo
Front-End Web Software Engineer (Angular12 + ASP.NET)

MWS Technology

Ukraine
Remote
$36k - $60k
Job logo
Angular Software Developer

Salamander Technologies

America
Remote
$80k - $95k
Job logo
Senior Front End Developer - Angular

triValence

United States
Remote
$125k - $160k
More jobs

Featured articles