javascript - 从具有其他导入的文件导入时，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));

我注意到它还在我的包中包含矩库，尽管我没有在 square 函数中使用它。如果我从 module.js 中删除矩导入，摇树工作正常，我只在包中看到 square。

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

标签： javascriptwebpacktree-shaking

Answer 1

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

如果您不使用时区而只使用几个简单的函数，您可以查看其他替代方案，例如dayjs，date-fns它们具有较小的核心并提供非常相似的 API。

详细解释和替代方案可以在 https://github.com/you-dont-need/You-Dont-Need-Momentjs找到