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.
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.
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.
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.
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:
Top comments (0)