ESM 摇树/死代码消除是如何工作的？答案

【问题标题】：How does ESM tree-shaking / dead code elimination work?ESM 摇树/死代码消除是如何工作的？
【发布时间】：2020-08-21 09:29:52
【问题描述】：

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

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

我想我仍然需要一个（至少）需要一个入口点的捆绑程序（如 Webpack），这样它就可以摆脱所有不需要的东西，这样我就可以减少（例如）AWS 的包大小拉姆达？这是你会做的事情吗？

【问题讨论】：

标签： javascript node.js typescript

【解决方案1】：

当您使用import 而不是require 时，转译器能够在编译时构建依赖关系树（这就是为什么您不能动态地import 代码）。

例如，如果你这样写：

import { myfunc } from 'mylib';

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

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

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

【讨论】：

你是对的，但这并不是我真正要问的。 Typescript 编译器不执行任何摇树。所以这是捆绑商必须做的事情，我猜？您是否也会为您的（后端）应用程序（例如 lambda）执行此操作？
是的，Typescript 只会通过导入从 ts 转换为 js。捆绑器的角色是做摇树部分。
顺便说一句，摇树 lambda 不会给您带来太多性能改进。 Tree-shaking 在浏览器上最有用，以避免下载无用的代码。 Lambda 可以访问一个非常高带宽的网络，因此对它们进行摇树只会使它们更难调试。
我也是这么想的。只是想确保我走在正确的道路上。