Dev Discussions: How to Reduce your Angular Bundle Size with Google Developers Expert Santosh Yadav

July 15, 2022 • Development

By Ken Swearengen

If you ever have questions about Angular, Santosh Yadav is the person to ask.

Not only is he an Auth0 ambassador and a GitHub Star, but he’s currently certified as a Google Developers Expert for Angular.

Santosh jumped into the deep end with Angular early in his career—building apps, teaching others, and attending conferences in his spare time. That dedication to Angular worked out, as he’s now a leading MEAN stack trainer and developer, with his own popular Angular-focused YouTube channel to boot.

Santosh recently sat down with CoderPad Developer Advocate Corbin Crutchley to discuss one Angular topic that’s particularly popular these days – reducing the bundle size of angular apps.

Bundle sizes impact the performance of a website. If you have a bundle of greater than 1MB, then your user has to wait longer for the browser to:

Download that bundle
Parse the bundle
Display contents of the bundle

While this might not seem like a big deal, each MB can take an extra second, which can easily cause a user to lose interest and navigate away from the site – not exactly a good business practice.

Santosh loves using Angular to reduce bundle size and points out four ways Angular can help you do this:

Tree shaking via Angular Ivy
Lazy loading
Source map analyzers
Standalone components

Bundle reduction tip #1: Use tree shaking

A typical library will ship with hundreds of functions, but rarely will your application need to use all of them.

This presents a problem in that importing the entire library can drastically increase your bundle size.

Tree shaking is a way to only import the functions of a module your application will use.

A comparison of component map with tree shaking. On the left is one index.js file with 3 modules. One module has three files, and one of those files has three functions. In total this beforee images has four files and 11 functions that will be build. On the right is the after tree shaking image where one file has one module, that module has one file, and that file has one function that will be included in the bundle. — via Aaditya Sharma on StackOverflow

Depending on the size of the library you’re utilizing, you can drastically cut down on your bundle size. As a bonus, you don’t need to do anything to do tree shaking in your Angular application – it’s been a part of Angular Ivy since Angular 8.

If you’re not familiar with it, Ivy is – at its simplest – an ultra-efficient rendering pipeline.

An image with four boxes labelled "rendering pipelien in angular". The first box says "template html", then an arrow to the next box which says "template data", then an arrow to the next box which says "angular interpreter", and finally an arrow pointing to a box that says "DOM". — The steps Angular Ivy takes to render updates to the DOM. Via AngularMinds

In addition to reducing the bundle size, you’ll also get the following benefits with Ivy:

Faster testing
Better debugging
Improved CSS class and style binding
Improved type checking
Improved build errors
Improved build times, enabling AOT on by default
Improved Internationalization

Bundle reduction tip #2: Lazy loading

While tree shaking will prevent completely unused pieces of code from making it into your bundle, you’ll often have functions that are not used when a user first logs into your application but will be used later.

Lazy loading creates multiple chunks of code that are only loaded when that particular code is used in the application.

This can really reduce the size of the application, especially if you split libraries into different feature modules that are only used when needed by the application.

A component map labelled Lazy loading along with the Angular symbol. The map has several components, some are marked "lazy" and the rest are not. — Example component structure with lazy loading. Via 9lessons.info

While lazy loading isn’t just limited to Angular (you can use it in React via React.lazy as well), when paired with the other bundle-reducing technology it makes Angular quite an attractive framework for creating smaller applications.

Bundle reduction tip #3: Source map analyzers

A source map analyzer is precisely what it sounds like – it analyzes the different files, components, and modules of your application to show you how big they are.

You can then use this information to see where you can improve your code base’s efficiency to reduce its size. Santosh found source map analyzers particularly useful to reduce the size of a component with a large bundle size due to a CSS issue.

A source analysis map that shows the size of different files and folders in relation to one another. — Example results of a source map analysis. Via DigitalOcean.

As demonstrated in the example above, you can see which dependencies take up the most space. If they’re configured wrong, you’ll be able to tell immediately.

Alternatively, it may help you decide to migrate away to different dependencies to reduce the bundle size further.

Bundle reduction tip #4: Standalone components

One of the newest Angular features to help you reduce bundle size are standalone components:

“Standalone components, directives, and pipes aim to streamline the authoring experience by reducing the need for NgModules,” according to the Angular developer documentation.

Angular is unique in frontend frameworks because you must register your components.

Standalone components force you to have more explicit imports, which enables you to side-step the need for tree-shaking in some places because you’re just not manually including what you don’t need.

How to avoid Angular overdose

As much as Santosh loves working with Angular, he’s also a big advocate of work-life balance. He has advice for would-be workaholics and how managers can help prevent employee burnout – and you can watch him talk about those in the Twitch playback video here.

Interested in more conversations with developers about their tech stacks? Check out these other Dev Discussions: