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

Question

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

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

我想我仍然需要一个 bundler (例如 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/