{"id":18805959,"url":"https://github.com/m-thompson-code/moment-replacement","last_synced_at":"2025-10-20T10:43:14.798Z","repository":{"id":44150617,"uuid":"508812144","full_name":"m-thompson-code/moment-replacement","owner":"m-thompson-code","description":"Example of how to analyze Angular bundle","archived":false,"fork":false,"pushed_at":"2022-07-11T20:50:06.000Z","size":230,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-05T23:32:26.215Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/m-thompson-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-29T18:56:16.000Z","updated_at":"2022-06-29T19:52:57.000Z","dependencies_parsed_at":"2022-07-30T23:38:05.343Z","dependency_job_id":null,"html_url":"https://github.com/m-thompson-code/moment-replacement","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/m-thompson-code/moment-replacement","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fmoment-replacement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fmoment-replacement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fmoment-replacement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fmoment-replacement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m-thompson-code","download_url":"https://codeload.github.com/m-thompson-code/moment-replacement/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fmoment-replacement/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265814821,"owners_count":23832777,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T22:45:46.817Z","updated_at":"2025-10-20T10:43:09.772Z","avatar_url":"https://github.com/m-thompson-code.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Analyzing Your Angular Bundle\n\nA 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).\n\nThis blog post will go over how to analyze your Angular bundle and pinpoint libraries that are bloating your application.\n\n## Why You Should Analyze Your Angular Bundle\n\nIt'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 staple in my projects until I realized how huge it was.\n\nThe following section will walk through how I came to the conclusion to avoid MomentJS using this [demo application](https://m-thompson-code.github.io/moment-replacement/) where I display tomorrow's date.\n\n## How to Analyze Your Angular Bundle\n\nA 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.\n\n1. Install `ngx-builders/analyze`\n```cmd\nng add @ngx-builders/analyze\n```\n\n2. Install `source-map-explorer`\n```cmd\nnpm i -D source-map-explorer\n```\n\n3. Update `package.json` to have an analyze npm script:\n\n```json\n{\n  \"name\": \"[YOUR_PROJECT_NAME]\",// Likely will be your project name, but doesn't have to be\n  \"scripts\": {\n    \"ng\": \"ng\",\n    // ...\n    \"analyze\": \"ng run [YOUR_PROJECT_NAME]:analyze\",// You can find your project name in angular.json under the projects property\n  },\n}\n```\n\n4. Run analyze npm script\n\n```cmd\nnpm run analyze\n```\n\nYou should see your application build and your browser should open the results provided by `source-map-explorer`.\n\n## Why Replace MomentJS\n\nThis [demo](https://m-thompson-code.github.io/moment-replacement/) has been implemented 3 ways:\n\n1. Using [Native Date API](https://github.com/m-thompson-code/moment-replacement/blob/main/src/app/services/date.service.ts#L10)\n\n2. Using [MomentJS](https://github.com/m-thompson-code/moment-replacement/blob/momentjs/src/app/services/date.service.ts#L11)\n\n3. Using [date-fns](https://github.com/m-thompson-code/moment-replacement/blob/date-fns/src/app/services/date.service.ts#L12)\n\n### Tests\n\nEach of these solutions use the same [tests](https://github.com/m-thompson-code/moment-replacement/blob/main/src/app/services/date.service.spec.ts#L21) to verify implementation achieves the expected behavior:\n\n### Comparing Results\n\nAnalyzing how each solution affects the overall bundle for my demo shows:\n\n| Implementation  | Total Size                            |\n| ---             | ---                                   |\n| Native Date API | 202 KB                                |\n| MomentJS        | 575.18 KB                             |\n| date-fns        | 222.65 KB                             |\n\n[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. Total size is **202 KB**.\n\n![native data api bundle graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt2rtmchqby7q9iqqfgp.png)\n\nThis 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.\n\n[Using MomentJS](https://m-thompson-code.github.io/moment-replacement/assets/sme-result-momentjs.html) 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](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) and results in importing the entire library regardless of how little it is used.**\n\n![MomentJS bundle graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ytdft14wp54j0ij99ba.gif)\n\n[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**. 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](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking).\n\n![data-fns bundle graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vmayc4ow1ikpt8b4j7q.gif)\n\n## Conclusion\n\nWhen 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.\n\nDepending 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](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.\n\nLong story short, please consider the [alternatives](https://momentjs.com/docs/#/-project-status/recommendations/) to MomentJS.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thompson-code%2Fmoment-replacement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm-thompson-code%2Fmoment-replacement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thompson-code%2Fmoment-replacement/lists"}