Tuning Imports to Reduce the Size of an 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. This is because Angular comes with a lot of useful libraries already included within it. 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 learn how you can reduce the size of your Angular app by tuning your imports of 3rd-party libraries.

Let's dive in!

The first step in tuning your imports and reducing your bundle size involves diagnosing the biggest culprits. You can use the helpful webpack-bundle-analyzer library in order to get a visual of which dependencies are in need of the most tuning.

To install the webpack-bundle-analyzer using NPM, you can run npm install -g webpack-bundle-analyzer on the command line.

With this installed, you can now navigate to your Angular project directory and run:

ng build --stats-json

This command will build a configuration file that webpack-bundle-analyzer can use to give you the visual you need. Now it's time to see what the bundle looks like for an Angular app containing the lodash library.

Currently, the app imports lodash functions like this:

You can analyze your Angular bundle by running the following command: webpack-bundle-analyzer <path-to-stats.json>

This kicked off a simple server containing the analysis that you need. After navigating to localhost:8888, you can see the different libraries in your app relative to their size. Wow! This simple app is only using one lodash function but is including the entire lodash library—all 530 KB of it! You can do better than this. In the next section, you will learn how to tune your imports in order to reduce the size of your bundle.

You have learned how to diagnose the cause of your big bundle size. Now you will learn how to mitigate it! This is largely a two-step process.

First, you must determine whether or not the dependencies you are trying to reduce are using ES modules. If a library you are using, like lodash, has broken up their API into importable ES modules, then you can take full advantage of the tree-shaking power of your bundler. Fortunately, lodash provides an ES module compatible library—lodash-es.

Second, you must change your use of named imports to direct imports. For example, the import used above—import { first } from 'lodash'—would instead become import first from 'lodash/first'.

Now, implement the solution. To install the necessary libraries you need, you can run npm i --save lodash-es and npm i -D @types/lodash-es. After this, just change your named import(s) to default imports.

Once you have followed these steps, you are ready to reanalyze your bundle. Run ng build --stats-json to rebuild and then fire up the webpack-bundle-analyzer once again.

Wow! You just brought a 530 KB library dependency down to a 597 byte library dependency. That's a massive difference! Imagine what you can do by tuning all of the imports in your Angular app!

In this guide, you learned how to reduce the size of your Angular app simply by changing how you import third-party dependencies. You first learned how to diagnose the cause of your bundle size by using the webpack-bundle-analyzer. Then, you were shown how you could mitigate your bundle size by identifying libraries that use ES modules and then changing your named imports to default imports.

You can now be confident in dramatically reducing the size of your production Angular app!