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

编程问答 2022-05-09

问题描述

我创建了这个例子

module.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 导入，则摇树工作正常，并且我只能在我的包中看到正方形。

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

解决方法

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

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

enter image description here

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

,

好的，我想通了！ 我必须在 webpack.config 规则中专门为该模块设置 sideEffects..

 module: {
    rules: [
        {
            include: path.resolve(__dirname,"node_modules/moment"),sideEffects: false
        }
    ]
},
javascripttree-shakingwebpackwebpackwebpack