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

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也被导入

xyz()--> 并且通过in调用函数的效果dep.js也显示了in的效果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）来导入所需的函数然后调用它们时，通常会更容易构建代码。如果每个模块都作为顶层的一部分运行带有副作用的代码，那么事情很快就会变得非常混乱且难以管理。（这种技术也恰好可以改善树木抖动，但这只是一个附带好处）