英文:

Using dayjs in my Angular 14 application causes optimization bailout warnings

问题

我对Angular还相当陌生，在我们的项目中，我们最近切换到了Angular 14.2.12版本。我们使用moment.js进行基于时间的计算和日期时间解析。但在切换到Angular 14后，由于moment.js，我们出现了优化警告：

有关更多信息，请参阅：https://angular.io/guide/build#configuring-commonjs-dependencies```

moment.js 项目本身在其项目状态页面（https://momentjs.com/docs/#/-project-status/）上建议切换到另一个适用于现代树摇算法等的日期库。

我们决定使用dayjs，因为它在语法上似乎与moment.js 非常相似。但在将dayjs添加到我们的项目并将使用从moment.js 切换到dayjs后，再次在日志中出现了优化警告，现在是关于 **dayjs**：

```Warning: C:\Users\**\worklist\worklist.component.ts 依赖于 'dayjs'。CommonJS或AMD依赖关系可能会导致优化中断。
有关更多信息，请参阅：https://angular.io/guide/build#configuring-commonjs-dependencies```

在提到的组件中，我们像这样使用dayjs：

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

我认为dayjs 库以ES6库的形式存在，而不是以CommonJS库的格式存在。

我尝试使用dayjs 文档中的另一种导入语法：

```import * as dayjs from 'dayjs'```

但那没有起作用。

我在如何引用库方面有什么问题吗？

<details>
<summary>英文:</summary>

I&#39;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.

</details>


# 答案1
**得分**: 1

Day.js被封装为一个单一的JavaScript对象。由于JavaScript的动态性质，摇树优化过程无法静态分析这样的包以安全确定哪些被使用和哪些未被使用，以便移除未使用的代码。

对此的最佳做法是将`dayjs`添加到[`allowedCommonJsDependencies`][1]数组中，以消除该警告。

Day.js声称大小为2KB，因此这并不是太多的"优化补救"。

[1]: https://angular.io/guide/build#configuring-commonjs-dependencies

<details>
<summary>英文:</summary>

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&#39;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`][1] in order to remove that warning.

Day.js claims to be 2kB big so it&#39;s not that much of an &quot;optimization bailout&quot;.


  [1]: https://angular.io/guide/build#configuring-commonjs-dependencies

</details>



# 答案2
**得分**: 0

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`](https://www.npmjs.com/package/moment?activeTab=code) and [`dayjs`](https://www.npmjs.com/package/dayjs?activeTab=code) npm packages). So switching from moment to DayJS is definitely a performance improvement.

<details>
<summary>英文:</summary>

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`](https://www.npmjs.com/package/moment?activeTab=code) and [`dayjs`](https://www.npmjs.com/package/dayjs?activeTab=code) npm packages). So switching from moment to DayJS is definitely a performance improvement.

</details>