Reduce the Bundle Size of Your Angular App

In this guide, you will learn how to reduce the production bundle size of your Angular app. Angular is a very opinionated and robust framework. As a result, Angular apps generally have bigger bundle sizes when compared to apps written using other JavaScript frameworks like React. The Angular framework comes with a lot of useful libraries already included within it, such as RxJs and Zone.js. Keeping this in mind, it is very important for you to stay on top of your production bundle size. So how can you do this? In this guide, you will gain a high-level overview of the following strategies that will help to mitigate the size of your production bundle:

• Tuning your imports
• Lazy loading
• Updating to the latest Angular version

Let's dive in!

One of the greatest advantages of the ES6 module system is that it gives JavaScript bundlers the ability to tree-shake, or rather, remove dead code that isn't being used, from your bundle. When it comes to tuning your imports there is a step-by-step process you can follow in order to get the most benefits in terms of your bundle size.

The first step is to analyze your current bundle size. Currently, the best way to do this while using Angular is to use the webpack-bundle-analyzer library. This library starts up a server that gives you a visual of your production bundle. Using this library, you can tell which packages are the biggest culprits in terms of size.

Now that you have analyzed your bundle and found which packages you want to attempt to tune, the next step is to determine whether or not this package is using ES6 imports. If the package is using ES6 imports, you can take advantage of tree-shaking in your Angular build by changing your imports from module imports that target the entire library like this import { last } from 'lodash' into the default import equivalent: import last from 'lodash/last'. The above change would ensure that you aren't including the entirety of the lodash library into your bundle but that you are only including those parts of the library that are needed for the last function to execute. This would turn kilobytes into bytes in terms of your production bundle size!

The only catch to this is that the package you are using must be split up into ES6 modules. If the package does not use ES6 imports, there may be an alternative package that you can download that does take advantage of this exciting JavaScript feature. For example, lodash provides an alternative—lodash-es—that takes advantage of this exciting feature.

Tuning your imports can shave a lot of JavaScript off of your production bundle because it ensures that you are only importing the JavaScript that you need into your app. An entire guide has been written on just this topic. For a deeper dive, check out this Pluralsight guide.

Sometimes your app is big and there just isn't any way around it. For example, look no further than Facebook. Facebook is a big app with many features and users. When your app has a similar amount of features or uses needed libraries that are very large such as 3-D mapping libraries like Cesium, then you need to use other strategies to keep your app fast and your production bundle size down.

Lazy loading is a key strategy that enables you to chunk up your production bundle into several pieces. Instead of having one, big production bundle that looks something like this main.bundle.js - 5mb, you would have many, smaller "chunks." For example, after implementing lazy loading for three of your feature modules, your build would produce JavaScript that might look like this depending upon the size of your modules and app:

This is an extremely powerful means of keeping your production bundle size down and ensuring that your app loads quickly, no matter its size. Luckily for you, lazy loading is extremely straightforward to implement in Angular! It works via implementing lazy-loaded routes and modules.

For more technical depth on this topic and a code sample, check out the "Code-Splitting" section of this Pluralsight guide.

The most straightforward means of reducing your bundle size is to ensure that you are using the latest version of the Angular framework. Beginning with version nine, Angular began using the new Ivy compiler. The Ivy compiler introduces a number of optimizations into the rendering and compilation portions of the build phase of your app. These optimizations can result in a faster app and smaller production bundle size—all just from upgrading Angular! Below, you can find a list of just some of the benefits garnered from using the Ivy compiler:

• Smaller production bundle
• Faster build times
• Faster unit testing
• Improved debugging including breakpoints in HTML
• More efficient type checking

Staying on top of the latest version means that you can bring in all of the latest optimizations that become available. What's more, Angular provides an easy pathway to upgrading via the Angular CLI's ng update command. Getting into the inner workings of the ng update command is beyond the scope of this guide, but Angular provides a very helpful upgrade guide that can help you get to the latest version.

In this guide, you learned three strategies for reducing the production bundle size of your Angular app. First, you learned both how to analyze your bundle size and tune your imports in order to take advantage of the tree-shaking ability of the Angular build system. Next, you learned how lazy loading can chunk your big bundle up into bite-sized pieces and how this will make your app perform faster and load more quickly. Finally, you learned how staying up-to-date with the latest Angular version ensures that you are taking advantage of the latest and greatest bundle optimizations that the framework provides.

I hope that this guide has helped you to learn some of the most prominent and key strategies for reducing the size of your production Angular app.