Webpack5 似乎没有对未使用的导出进行 tree-shaking

Question

我用以下文件建立了一个小项目

- src/
  - lib/
    - lib1.ts
      - export : func_lib1_1, func_lib1_2
    - lib2.ts
      - export : func_lib2_1, func_lib2_2
  - pkg1/
    - pkg1.ts
      - import & use : func_lib1_1, func_lib2_1
  - pkg2/
    - pkg2.ts
      - import & use : func_lib1_1
  - pkg3/
    - pkg3.ts
      - import & use : func_lib1_1

我根据 the official documentation 配置了各种 build/package/optimisation 设置：

webpack.config.js

    mode: "production",
    optimization: {
        usedExports: true,
    },

package.json

    "sideEffects": false,

pkgX.ts

    import { func_lib1_1 } from "../lib/lib1";
    
    console.log("pkgX");
    console.log(func_lib1_1());

但在结果包中我仍然看到未使用的函数 func_lib1_2 和 func_lib2_2 被包含在内：

pkg1.bundle.js

    /***/ 119:
    /***/ ((__unused_webpack_module, exports) => {
    
    Object.defineProperty(exports, "__esModule", ({ value: true }));
    exports.func_lib1_2 = exports.func_lib1_1 = void 0;
    function func_lib1_1() {
        return "func_lib1_1";
    }
    exports.func_lib1_1 = func_lib1_1;
    function func_lib1_2() {
        return "unused, shouldn't be bundled";
    }
    exports.func_lib1_2 = func_lib1_2;
    
    /***/ }),

你知道为什么吗？我能做些什么来解决这个问题并获得我所寻求的书本摇树？

Minimal repro setup available here

提前致谢

更新：来自 optimizationBailout 的更多信息：true

  modules by path ./src/lib/*.ts 666 bytes
    ./src/lib/lib1.ts 333 bytes [built] [code generated]
      Statement (ExpressionStatement) with side effects in source code at 2:0-62
      ModuleConcatenation bailout: Module is not an ECMAScript module
    ./src/lib/lib2.ts 333 bytes [built] [code generated]
      Statement (ExpressionStatement) with side effects in source code at 2:0-62
    ModuleConcatenation bailout: Module is not an ECMAScript module
  ./src/pkg1/pkg1.ts 263 bytes [built] [code generated]
    Statement (ExpressionStatement) with side effects in source code at 2:0-62
    ModuleConcatenation bailout: Module is not an ECMAScript module
  ./src/pkg2/pkg2.ts 182 bytes [built] [code generated]
    Statement (ExpressionStatement) with side effects in source code at 2:0-62
    ModuleConcatenation bailout: Module is not an ECMAScript module
  ./src/pkg3/pkg3.ts 182 bytes [built] [code generated]
    Statement (ExpressionStatement) with side effects in source code at 2:0-62
    ModuleConcatenation bailout: Module is not an ECMAScript module

这很有趣。我申报出口的方式有问题吗？

更新 2：它在没有 ts-loader 的情况下工作！

我尝试将所有文件更改为 .js 并删除整个 ts-loader。 Tree-shaking 现在按预期工作。

现在更新的问题是：如何让它与打字稿一起工作？

可能相关但上下文不同的类似问题

webpack 4, same situation
webpack 4, with a variable
webpack 4, with import *

Answer 1

我自己弄明白了，auto-answer 备案：

tsconfig.json 错误，它没有保留 ES6 模块语法，因此 webpack 无法正确进行 treeshake。

More details on the correct configuration (optionally including Babel too) can be found here

Webpack5 似乎没有对未使用的导出进行 tree-shaking

Webpack5 does not seem to tree-shake unused exports

webpack

tree-shaking

webpack-5