Webpack 从模块导入 javascript 函数也会导入该模块中的所有其他语句和函数

Question

我正在为我的项目使用 webpack。

假设我有一个dep.js 文件，其中包含以下代码

export function abc() {
   var a = 10;
}

console.log(100);

function xyz(){
   var b = 11;
}

xyx();

我有一个main.js 文件，其中包含以下代码

import {abc} from './dep.js';

根据导入导出的逻辑，应该只导入函数abc。 但是当我在控制台中检查源代码时，我发现

--> 所有其他语句和函数，如console.log(100)、function xyx 也被导入

--> 以及dep.js中通过xyz()调用函数的效果也显示了main.js中的效果

为什么会这样？

Answer 1

默认情况下，这就是模块的工作方式。如果模块的任何部分至少被导入一次，整个模块会运行它的所有顶级代码。

可以删除在 Webpack 中无法使用 tree shaking 运行的死代码，但显示的模块没有任何死代码 - 它有一个导出的函数，可以使用，它的代码是在顶层运行并调用（console.log、xyx 的声明和xyx 的调用）。

如果您导出了模块中其他地方没有使用的东西，它可能会随着摇树摇晃而被丢弃，例如：

export function abc(){
   var a = 10;
}
export function def(){
   var a = 10;
}

这里，如果def没有被导入或在别处使用，它可以被自动删除。

（另请注意，函数定义在它们之后需要()s，即使它们不带参数）

---

这就是为什么我几乎总是只导出函数 - 最好避免编写对模块顶层有副作用的代码，因为这样只导入模块就会导致在那些副作用中（就像你在这里看到的那样）。当你有一个单一的入口点（例如main.js）来导入它需要的函数然后调用它们时，通常更容易构建代码。如果每个模块都将带有副作用的代码作为顶层的一部分运行，那么事情很快就会变得非常混乱和难以管理。 （这种技术也恰好可以改善 tree-shaking，但这只是一个附带的好处）