Using dayjs in my Angular 14 application causes optimization bailout warnings

Question

I'm quite new to Angular and within our project, we switched recently to Angular 14.2.12. We use moment.js for time based calculation and date time parsing. But after switching to Angular 14, we got optimization bailout warnigs because of moment.js:

Warning: C:\Users\**\worklist\worklist.component.ts depends on 'moment'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

The moment.js project itself recommends on its project status page (https://momentjs.com/docs/#/-project-status/) to switch to another date library which is better suited for the modern tree-shaking algorithms etc.

We decided to use dayjs, as it seems to be very similar in syntax to moment.js. But after adding dayjs to our project and switch the usage from moment.js to dayjs, again the optimization warning showed up in the logs, now complaining about dayjs:

Warning: C:\Users\**\worklist\worklist.component.ts depends on 'dayjs'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

In the mentioned components, we use dayjs like this:

import dayjs from 'dayjs';
.
.
.
this.importantDate = dayjs(json.impDate, 'YYYY-MM-DD').format(DATE_FORMAT)

I thought the dayjs library comes as an ES6 library and not in the CommonJS library format.

I tried to use another import syntax like in the dayjs documentation:

import * as dayjs from 'dayjs'

That didn't work.

Is there something wrong in how I'm referencing the library?

I tried to use another import syntax like in the dayjs documentation:

import * as dayjs from 'dayjs'

That didn't work.

Werby

Answer 1

Day.js is packaged as a single JavaScript object. Due to the dynamic nature of JavaScript, the tree-shaking processes cannot statically analyze such packages in order to safely determine what's being used and what is not, in order to remove the unused code.

The best thing you can do with this is add dayjs in the array of allowedCommonJsDependencies in order to remove that warning.

Day.js claims to be 2kB big so it's not that much of an "optimization bailout".

Meadow

Answer 2

Your assumption is wrong, DayJS is shipped in CommonJS and lacks ESM support. This is a known issue which is tracked on GitHub: https://github.com/iamkun/dayjs/issues/1765

With v2 of DayJS there will be ESM support, there is a v2 alpha version with you can try out (2.0.0-alpha.2). However it is not clear when stable v2 will be shipped.

Although both Moment and dayjs cannot be optimized during the build, dayjs is much smaller in size. Moment minified is ~58kB big, DayJS ~7kB (see moment and dayjs npm packages). So switching from moment to DayJS is definitely a performance improvement.

Dwayne