export default 在 webpack 和 vite 中 treeshaking 效果实践

问题

treeshaking（摇树优化）是打包工具对代码优化的一个重要特性。我们都知道，单独使用 export xxx，如果未被 import {xxx} 或其他模块引用时，代码可以被标记并删除掉。但是对于 export default 却有不同的结果，我们下面就来实践一下。

使用版本

webpack：5+
vite：4+

export default 两种写法

• 第一种, treeshaking.js（我们暂且叫直接型默认导出）

export default {
  f1() {
    console.log('func1');
  },
  f2() {
    console.log('func2');
  }
}

• 第二种, treeshaking-2.js（我们暂且叫引用型默认导出）

function f1() {
  console.log('--func1');
}
function f2() {
  console.log('--func2');
}

export default {f1, f2}

导入 index.js

import treeshaking from './treeshaking.js';
import treeshaking2 from './treeshaking-2.js';

treeshaking.f2()
treeshaking2.f2()

webpack 优化效果

从下面输出文件我们可以看到，webpack treeshaking 优化对直接型默认导出写法无效，f1 函数还是被保留了，而第二种 default 写法则有效，f1 函数被删除优化掉了。

vite 优化效果

从下面输出文件我们可以看到，vite treeshaking 无论直接型或引用型，f1 函数都被保留了

结论

以下实践建立在 webpack5+ 和 vite4+，不同版本可能表现不一样

• 对于 export 写法，webpack 和 vite 都支持 treeshaking 未使用的代码
• 对于 export default，webpack treeshaking 不支持直接型默认导出，但支持引用型默认导出。
• 对于 export default，vite treeshaking 两者都不支持

总结

• 开发中建议使用 export，如果要使用 export default，为了兼容多个打包工具，建议函数不合并在一个模块，而是每个模块导出单个函数。