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

當導出為默認對象時，它是否會破壞 Webpack 中未使用值的樹抖動？

是的。

記住所有樣式實用程序都在styleUtilities下可能很方便。

為此，您仍然應該在utilities.js模塊中使用命名導出。 然后在someModule.js導入該模塊時，使用命名空間導入語法：

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

styleUtilities.someFunction();

這仍將允許 tree-shaking ，並為模塊的使用者提供導入樣式的選擇（而不是將對象強加於它們）。