Our content is free thanks to ag-Grid

ag-Grid is the industry leading JavaScript datagrid

ag-grid.com

Optimize Angular bundle size in 4 steps

Post Editor

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 It’s hard to deny that i

4 min read
post

Optimize Angular bundle size in 4 steps

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 It’s hard to deny that i

post
post
4 min read
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

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.

Discuss with community

Share

About the author

author_image
Siyang Kern Zhao
author_image

About the author

Siyang Kern Zhao

About the author

author_image
Siyang Kern Zhao
NxAngularCli
NxAngularCli
NxAngularCli

Featured articles

RxJSpost
21 January 20214 min read
RxJS in Angular: Part III

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

RxJSpost
21 January 20214 min read
RxJS in Angular: Part III

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

Read more
RxJSpostRxJS in Angular: Part III

21 January 2021

4 min read

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

Read more
Angularpost
20 January 20216 min read
Angular and SOLID principles

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Angularpost
20 January 20216 min read
Angular and SOLID principles

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Read more
AngularpostAngular and SOLID principles

20 January 2021

6 min read

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Read more
Angularpost
14 January 20216 min read
Demystifying Taiga UI root component: portals pattern in Angular

Just before new year we announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.