ESM 树摇动/死代码消除如何工作？

Question

我很好奇 ESM 的摇树/死代码消除是如何工作的。我在各种 Node.js 项目中使用 Typescript，并开始导出我自己的 ESM 包 ( tsc --module es2015 --target es5 --outDir dist/esm) 而不是 CJS 包。此外，我尝试将仅作为 CJS 模块提供的依赖项（如 lodash）替换为作为 ESM 提供的库。

当我构建一个项目时，我的整个 TS 代码库 ( ./src) 被转换为 JS ( ./dist)；依赖关系仍然取自 ( ./node_modules)。没有进行树摇动。

我想我仍然需要一个捆绑器（例如 Webpack），它（至少）需要一个入口点，以便它可以摆脱不需要的所有内容，以便我可以减小（例如）AWS lambda 的包大小？这是你会做的事吗？

Answer 1

当您使用import而不是 时require，转译器能够在编译时构建依赖关系树（这就是您无法动态import编码的原因）。

例如，如果你这样写：

import { myfunc } from 'mylib';

转译器知道您只需要myfunc来自 的函数mylib。如果mylib包含 未使用的其他函数myfunc，则转译器可以将它们从包中删除。

这是简短的版本。Tree-shaking 实际上比这更复杂。如果您想了解更多信息，Webpack 有一篇很好的文章：

https://webpack.js.org/guides/tree-shaking/