Why Your Angular Bundle Is Bloated

A common reason why an Angular bundle is bloated is that it uses a library like MomentJS that isn't tree-shakable.

This blog post will go over how to analyze your Angular bundle and pinpoint libraries that are bloating your application.

Why to Analyze Your Angular Bundle

It's important to keep an eye on your project dependencies and call out the ones that are bloating your application. MomentJS used to be a stable in my projects until I realized how huge it was.

The following section will walk through how I came to the conclusion to avoid MomentJS for this demo where I display tomorrow's date.

How to Analyze Your Angular Bundle

A quick way to do this is to use ngx-builders. This will show you how your application is bundled and which dependencies are bloating your application.

1. Install ngx-builders

ng add @ngx-builders/analyze

1. Install source-map-explorer

npm i -D source-map-explorer

1. Update package.json to have an analyze npm script:

{  "name": "[YOUR_PROJECT_NAME]",// Likely will be your project name, but doesn't have to be  "scripts": {    "ng": "ng",    // ...    "analyze": "ng run [YOUR_PROJECT_NAME]:analyze",// You can find your project name in angular.json under the projects property  },}

1. Run analyze npm script

npm run analyze

You should see your application build and your browser should open the results provided by source-map-explorer.

Why to Replace MomentJS

This demo has been implemented 3 ways:

1. Using Native Date API

2. Using MomentJS

3. Using date-fns

Tests

Each of these solutions use the same tests to verify implementation achieves the expected behavior:

Considering the Results

Analyzing how each solution affects the overall bundle for my demo shows:

Using Native Date API impacts my bundle size the least. Total size is 202 KB.

This makes sense since by avoiding any extra libraries, there's no risk of bloating my bundle size. Only downside is that implementation took much longer than using an existing library.

Using MomentJS impacts my bundle size the most. Total size is 575.18 KB. Using MomentJS bloats my application significantly resulting in being 64.8% of my total bundle size. This is because MomentJS is not tree-shakable and results in importing the entire library regardless of how little it is used.

Using date-fns increases my bundle size by 20.79 KB. Total size is 222.65 KB resulting in being 9.3% of my total bundle size. This is a huge improvement over importing MomentJS. This is because date-fns is tree-shakable.

Conclusion

When considering to add a library to an Angular application, tools such as ngx-builders and source-map-explorer can verify that they won't bloat that application's bundle size.

Depending on how much time I want to spend implementing all my features from scratch, I might avoid using any library. But if I want to spend less time reinventing the wheel, I'll reach for a well-known libraries such as date-fns that are tree-shakable. One thing is certain, I'll avoid libraries like MomentJS since they result in an unnecessary increase in bundle size.

Long story short, please consider the alternatives to MomentJS.