javascript - Webpack - 导出方法如何影响 Tree Shaking？

Question

对于实用函数和常量，我通常使用命名导出。

//utilities.js
export function someFunction(param){...}
export function someFunction2(param){...}


//someModule.js
import {someFunction} from "./utilities.js" 

但有时，我将它们导出为默认对象。

//styleUtilities.js
export function someFunction(param){...}
export function someFunction2(param){...}
export default {someFunction, someFunction2}

//someModule.js
import styleUtilities from "./styleUtilities" 

const {someFunction} = styleUtilities

当导出为默认对象时，它是否会破坏 Webpack 中未使用值的树摇动？

Answer 1

When exporting as default object, does it disrupt tree shaking for unused values in Webpack?

是的。

It could be convenient to remember that all style utilities are under styleUtilities.

为此，您应该仍然在 utilities.js 模块中使用命名导出。然后，在 someModule.js 中导入该模块时，使用命名空间导入语法:

import * as styleUtilities from "./utilities.js";

styleUtilities.someFunction();

这将 still allow tree-shaking ，并向模块的使用者提供导入样式的选择(而不是向他们强加一个对象)。