从具有其他导入的文件导入时，Webpack Tree Shaking 不起作用

Question

我创建了这个例子

模块.js

import moment from "moment";

export function square(x) {
    return x * x;
}

export function cube(x) {
    return moment.format(x * x * x);
}

main.js

import {square} from "./module";

console.log(square(1));

我注意到它还在我的包中包含了 moment 库，尽管我没有在 square 函数中使用它。如果我从 module.js 中删除 moment 导入，树摇动效果很好，我只在我的包中看到 square 。

这就是摇树的工作原理吗？如果我想在 module.js 文件中使用外部库，除了将代码拆分到不同的文件中之外，还有其他解决方法吗？

Answer 1

Moment.js是一个很棒的时间和日期库，具有许多出色的功能和实用程序。但是，如果您正在开发对性能敏感的 Web 应用程序，由于其复杂的 API 和大的包大小，可能会导致巨大的性能开销。此外，它高度基于 OOP API，这使得它无法与 tree-shaking 一起工作，从而导致巨大的包大小和性能问题。

如果您不使用时区，而只使用一些简单的功能，您可以看看其他替代方案，例如dayjs，date-fns它具有较小的内核并提供非常相似的 API。

详细说明和替代计划可以在https://github.com/you-dont-need/You-Dont-Need-Momentjs上找到