---
title: Is Your Angular Build Slow Due to Bloated Dependencies?
description: It's important to keep an eye on your project dependencies and call out the ones that are bloating your application. A quick way to analyze your Angular bundle is to use ngx-builders/analyze, a custom Angular CLI builder which allows you to run source-map-explorer with Angular. This will show you how your application is bundled and which dependencies are bloating your application and slowing down the build.
image: https://www.bitovi.com/hubfs/Is%20Your%20Angular%20Build%20Slow%20Due%20to%20Bloated%20Dependencies%3F.png
---

- ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg)
  
  [AI implementation](https://www.bitovi.com/services/ai-consulting)
- ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg)
  
  [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting)
- ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg)
  
  [Project Management](https://www.bitovi.com/services/agile-project-management-consulting)
- ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg)
  
  [Product Design](https://www.bitovi.com/services/product-design-consulting)
- ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg)
  
  [Frontend development](https://www.bitovi.com/services/frontend-development-consulting)
- [View more
  
  →
  
  ](https://www.bitovi.com/digital-consulting-services)

We're Experts in...

- [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting)
- [AI training](https://www.bitovi.com/ai-training-for-software-engineers)
- [Angular](https://www.bitovi.com/services/frontend/angular-consulting)
- [Design systems](https://www.bitovi.com/services/axure-figma-migration)
- [React](https://www.bitovi.com/services/frontend/react-consulting)
- [Temporal](https://www.bitovi.com/services/backend/temporal-consulting)
- [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native)
- [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting)

Showcase

![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png)

[View case study](https://www.bitovi.com/en/bitovi-yum-case-study)

More Projects

- [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign)
- [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies)
- [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp)
- [View more
  
  →
  
  ](https://www.bitovi.com/our-software-consulting-work)

Open Source Tools

We build powerful tools and open source them to support the community.

[See what we've built →](https://www.bitovi.com/open-source)

- [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg)
  
  BlogWe post about delivering products and solving problems.
  
  ](https://www.bitovi.com/blog)
- [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg)
  
  PartnershipsLearn about Bitovi's technology partners
  
  ](https://www.bitovi.com/partnerships)
- [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg)
  
  AcademyFree courses to build delivery skills
  
  ](https://www.bitovi.com/academy)
- [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg)
  
  Open source toolsUse or contribute to our community
  
  ](https://www.bitovi.com/open-source)

Let's Connect

- [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg)
  
  Discord
  
  ](https://discord.gg/J7ejFsZnJ4)
- [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg)
  
  LinkedIn
  
  ](https://www.linkedin.com/company/bitovi/)
- [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg)
  
  GitHub
  
  ](https://github.com/bitovi/)

![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png)

Name *

Work Email *

Phone

What's your project?

Send

### Contact Us

(312) 620-0386contact@bitovi.com

[ Angular ](https://www.bitovi.com/blog/topic/angular) |  July 12, 2022

# Is Your Angular Build Slow Due to Bloated Dependencies?

 It's important to keep an eye on your project dependencies and call out the ones that are bloating your application. A quick way to analyze your Angular bundle is to use ngx-builders/analyze, a custom Angular CLI builder which allows you to run source-map-explorer with Angular. This will show you how your application is bundled and which dependencies are bloating your application and slowing down the build.

![Mark Thompson](https://www.bitovi.com/hubfs/People/mark-thompson.jpg)

 Mark Thompson

Share:

[![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=)

Bulky dependencies can slow down the build speed of your Angular application and cause your Angular bundle to bloat. A common reason why an Angular bundle is bloated is that it uses a library like [MomentJS](https://momentjs.com/) that isn't [tree-shakable](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). Replacing problematic dependencies can cause significant improvements to your developer experience and reduce your application's build time.

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

## Why You Should Analyze Your Angular Bundle

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

The following section will walk through how I concluded that I should avoid MomentJS using this [demo application](https://m-thompson-code.github.io/moment-replacement/) where I display tomorrow's date.

## How to Analyze Your Angular Bundle

A quick way to analyze your Angular bundle is to use [ngx-builders/analyze](https://github.com/ngx-builders/source-map-analyzer#setting-up-this-builder), a custom [Angular CLI builder](https://angular.io/guide/cli-builder#cli-builders) which allows you to run `source-map-explorer` with Angular. This will show you how your application is bundled and which dependencies are bloating your application and slowing down the build.

1. ```
   ng add @ngx-builders/analyze
   ```
2. Install `source-map-explorer`
   
   ```
   npm i -D source-map-explorer
   ```
3. 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
   },
   }
   ```
4. 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 Replace MomentJS

This [demo](https://m-thompson-code.github.io/moment-replacement/) has been implemented in three ways:

1. Using [Native Date API](https://github.com/m-thompson-code/moment-replacement/blob/main/src/app/services/date.service.ts#L10)
2. Using [MomentJS](https://github.com/m-thompson-code/moment-replacement/blob/momentjs/src/app/services/date.service.ts#L11)
3. Using [date-fns](https://github.com/m-thompson-code/moment-replacement/blob/date-fns/src/app/services/date.service.ts#L12)

### Benchmarking Performance with Tests

Each solution uses the same [tests](https://github.com/m-thompson-code/moment-replacement/blob/main/src/app/services/date.service.spec.ts#L21) to verify that its implementation achieves the expected behavior:

### Comparing the Results

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

| Implementation | Total Size |
| --- | --- |
| Native Date API | 202 KB |
| MomentJS | 575.18 KB |
| date-fns. | 222.65 KB |

[Using Native Date API](https://m-thompson-code.github.io/moment-replacement/assets/sme-result-native-date.html) negatively impacts my bundle size the least. The total size is **202 KB**.

![angular-bloat-1](https://www.bitovi.com/hs-fs/hubfs/angular-bloat-1.png?width=694&name=angular-bloat-1.png)

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

[Using MomentJS](https://m-thompson-code.github.io/moment-replacement/assets/sme-result-momentjs.html) impacts my bundle size the most. The total size is **575.18 KB**. Using MomentJS bloats my application significantly, resulting in **64.8%** of my total bundle size. This is because** MomentJS is not **[**tree-shakable**](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)** and results in importing the entire library regardless of how little it is used.**

![angular-bloat-2](https://www.bitovi.com/hs-fs/hubfs/angular-bloat-2.gif?width=600&name=angular-bloat-2.gif)

[Using date-fns](https://m-thompson-code.github.io/moment-replacement/assets/sme-result-date-fns.html) increases my bundle size by **20.79 KB**. The total size is **222.65 KB** resulting in **9.3%** of my total bundle size. This is a vast improvement over importing MomentJS. This is because date-fns is [tree-shakable](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking).

![angular-bloat-3](https://www.bitovi.com/hs-fs/hubfs/angular-bloat-3.gif?width=600&name=angular-bloat-3.gif)

## Conclusion

When considering adding a library to an Angular application, tools such as [ngx-builders](https://github.com/ngx-builders/source-map-analyzer#setting-up-this-builder) and [source-map-explorer](https://github.com/danvk/source-map-explorer#readme) can verify that the library 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 well-known libraries such as [date-fns](https://date-fns.org/) that are [tree-shakable](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). One thing is certain, I'll avoid libraries like [MomentJS](https://momentjs.com/) since they result in an unnecessary increase in bundle size.

Long story short, please consider the [alternatives](https://momentjs.com/docs/#/-project-status/recommendations/) to MomentJS.

Need help analyzing your Angular application to figure out why your build is slow? Bitovi is here to help! Join our [Community Discord](https://discord.gg/J7ejFsZnJ4) and share your feedback with us on the #Angular channel. Don't hesitate to [schedule a free consultation call ](https://www.bitovi.com/services/frontend/angular-consulting)if you need any assistance. Our team is always here to support you.

[![Tag for performance](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) performance ](https://www.bitovi.com/blog/topic/performance)

 Previous Post

![Optimizing Secrets Management with External Secrets Operator](https://www.bitovi.com/hs-fs/hubfs/Optimizing%20Secrets%20Management%20with%20External%20Secrets%20Operator.png?height=117&name=Optimizing%20Secrets%20Management%20with%20External%20Secrets%20Operator.png) [ Optimizing Secrets Management with External Secrets Operator ](https://www.bitovi.com/blog/external-secrets-operator-aws)

  

 Next Post

![DevOps for Newbies: What Is the DevOps Lifecycle?](https://www.bitovi.com/hs-fs/hubfs/DevOps%20for%20Newbies-%20What%20Is%20the%20DevOps%20Lifecycle%3F.png?height=117&name=DevOps%20for%20Newbies-%20What%20Is%20the%20DevOps%20Lifecycle%3F.png) [ DevOps for Newbies: What Is the DevOps Lifecycle? ](https://www.bitovi.com/blog/devops-for-newbies-devops-lifecycle)

```json
{
  "@context" : "http://schema.org",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "United States",
    "addressLocality" : "Libertyville",
    "addressRegion" : "IL",
    "postalCode" : "60048",
    "streetAddress" : "1134 Pine Tree Lane "
  },
  "alternateName" : "Bitovi",
  "areaServed" : {
    "@type" : "GeoCircle",
    "geoMidpoint" : {
      "@type" : "GeoCoordinates",
      "latitude" : "41.8781",
      "longitude" : "87.6298"
    },
    "geoRadius" : "5000 km"
  },
  "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company",
  "email" : "contact@bitovi.com",
  "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png",
  "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg",
  "mainEntityOfPage" : {
    "@id" : "https://www.bitovi.com/blog/why-your-angular-bundle-is-bloated",
    "@type" : "WebPage",
    "description" : "It's important to keep an eye on your project dependencies and call out the ones that are bloating your application. A quick way to analyze your Angular bundle is to use ngx-builders/analyze, a custom Angular CLI builder which allows you to run source-map-explorer with Angular. This will show you how your application is bundled and which dependencies are bloating your application and slowing down the build."
  },
  "naics" : "541511",
  "name" : "Bitovi Web App Consulting",
  "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ],
  "telephone" : "312-620-0386",
  "url" : "http://bitovi.com"
}
```

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Mark Thompson"
  },
  "dateModified" : "September 29, 2023, 8:12:22 PM",
  "datePublished" : "2022-07-12 12:00:00",
  "description" : "It's important to keep an eye on your project dependencies and call out the ones that are bloating your application. A quick way to analyze your Angular bundle is to use ngx-builders/analyze, a custom Angular CLI builder which allows you to run source-map-explorer with Angular. This will show you how your application is bundled and which dependencies are bloating your application and slowing down the build.",
  "headline" : "Is Your Angular Build Slow Due to Bloated Dependencies?",
  "image" : {
    "@type" : "ImageObject",
    "url" : "https://www.bitovi.com/hubfs/Is%20Your%20Angular%20Build%20Slow%20Due%20to%20Bloated%20Dependencies%3F.png"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg"
    },
    "name" : "Bitovi"
  }
}
```