question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MomentJS cannot be optimized and the moment-date-adapter is causing increased bundle size

See original GitHub issue

Reproduction

Steps to reproduce:

  1. Add a dependency on MatMomentDateModule on your angular app.
  2. Build the app with ng build --prod.
  3. Notice the increase in the output bundle size.

Screenshot of webpack-bundle-analyzer of the main bundle (built with --stats-json):

Stats - Screenshot from 2020-03-02 19-10-41

Expected Behavior

Addition of a “simple” widget should not increase the output bundle size dramatically.

Actual Behavior

Huge increase in the bundle size, on the order of a few hundred kilobytes. (Over 338kb added by moment.js alone, in my example.)

Environment

  • Angular: 9.0.4
  • CDK/Material: 9.1.0
  • Browser(s): N/A
  • Operating System (e.g. Windows, macOS, Ubuntu): N/A

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:6
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
devversioncommented, May 26, 2020

Thanks for this issue. We are aware of the limitations with MomentJS. We should really document the bundle size implications with the moment date adapter. Additionally it might be good to provide a better integrated date adapter (one that can be more optimized).

We have various proposals for other date adapters (such as date-fns or day.js)

1reaction
jelbourncommented, Sep 17, 2020

Tracking providing official alternatives to moment in #20599

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot find module '@angular/material-moment-adapter'
I try importing the MomentDateAdapter as shown on the angular website but Visual Studio Code keeps complaining it cant find @angular/material- ...
Read more >
Docs - Moment.js
Moment doesn't work well with modern "tree shaking" algorithms, so it tends to increase the size of web application bundles.
Read more >
How We Managed to Shed 300kb of Moment.Js Size in Angular
I analyzed my generated build with source-map-explorer and got the following treemap. I observed that my build size increased by 364KB with ...
Read more >
DayJS: The best lightweight alternative to momentjs
momentJS vs DayJS? import cost; Bundle Size. DayJS; MomentJS; Minimal Project (without any external library aside from boilerplate). Performance.
Read more >
angular/material-moment-adapter - npm
Keywords · Install · Repository · Homepage · Weekly Downloads · Version · License · Unpacked Size · Total Files.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found