Webpack中导入类的单个函数却引入整个类？求原因及解决方法

我刚接触Webpack，在类A中尝试从类B导入函数foo，但Webpack并未仅导入foo函数，而是引入了整个B类。相关代码如下：

类A代码：

import {foo} from './B'
export default class A {
    foo();
    ...
}

最初的类B代码：

export default class B {
   ...
    static foo(){
      //Do something
    }
}
export const foo = B.foo;

我曾尝试修改B类的导出方式：

export default class B {
    ...
}

export function foo(){
 //Do something
}

问题原因 #

• 第一种导出方式里，你导出的foo常量是B.foo的引用，也就是类B的静态方法。Webpack在做静态分析时，会发现要获取B.foo必须先完整解析并初始化整个B类，没法单独剥离这个静态方法，所以只能把整个B类打包进来。
• Tree Shaking（摇树优化）的生效前提是导出内容能被静态分析，且不依赖其他模块的整体初始化。第一种写法中foo的导出绑定了整个B类，破坏了这个前提，导致Tree Shaking失效。

解决方法 #

1. 直接独立导出函数：就像你尝试的第二种写法那样，把foo作为独立函数导出，不跟B类绑定。这种情况下，foo是完全独立的导出项，Webpack可以轻松通过Tree Shaking只打包foo，不会引入整个B类。
2. 先定义函数再挂载到类上：如果需要保留B类里的静态方法，同时单独导出foo，可以先定义foo函数，再把它挂载到B类的静态属性上。这样导出的foo不依赖类的初始化，Webpack就能单独提取它：

export function foo() {
  // Do something
}

export default class B {
  ...
  static foo = foo;
}

内容的提问来源于stack exchange，提问作者Sam