Have you ever tried examining the size of an entire Angular project and comparing it to the size of the code compiled by Angular (its build output in the dist folder)?
The difference is almost hard to believe. Typically, the entire project folder of an Angular app is well above 600MB, which includes a lot of things, including your code, all your dependencies, but also the Angular CLI, the TypeScript compiler, and more:
After running ng build, your dist folder is much smaller than 600MB, usually just a few KB or MB, depending on the size of your application.
This is because of a technique called tree-shaking.
We’re all aware that our code only depends on a subset of what’s in our project folder. We might have dependencies downloaded by accident but never used or have entire modules of Angular that we’re not using. Here is an example of what a sample app could be using:
Also, the compilers and all code related to unit testing are not needed in production, so the build process knows how to eliminate all that.
Tree-shaking is about keeping only the bare minimum of code our application needs — everything else can be ignored. In other words, the build process shakes our code tree, and any code that isn’t “tied” to a branch of our code base falls off, just like the leaves of a tree in the fall:
This decreases the size of our build output by quite a lot already. But newer features of Angular help push tree-shaking even further. In the past, we imported entire modules in our app, increasing its size even though we’d only use a subset of these modules.
For instance, you might depend on a component library with 100 components and directives and use only 5 or 6. We rarely use 100% of all library features. Instead, we just need some functions or classes of those libraries:
This is where standalone components shine. With standalone features, instead of importing entire modules full of features we won’t use, we import individual components, directives, and pipes, helping Angular be a lot better at tree shaking:
Whenever you use an import syntax in your Angular app, you tell the compiler: I need this dependency to run that component/pipe/directive/service. Cleaning up unused imports can be an easy way to ensure tree-shaking removes all the code we don’t need in production.
On the web, remember that size matters: The more code your users have to download, the slower the application is since the code has to be downloaded, parsed, and executed before it renders the HTML application.
You can also use budgets to keep your application size under control and receive warnings or even errors at build time when some dependency dramatically increases the size of your app.
My name is Alain Chautard. I am a Google Developer Expert in Angular and a consultant and trainer at Angular Training, where I help web development teams learn and become comfortable with Angular.
If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and the Weekly Angular Newsletter for helpful Angular tips, updates, and tutorials.
