340 - 《Tree Shaking 原理》

下午听团队同学讲的分享，怕忘，记录下。其实上次听另一个同学讲过一遍，但是忘了。

以一个最简示例为例。比如，我们有 entry.ts 和 a.ts 两个文件，entry.ts 依赖 a.ts。

// entry.ts
import a from './a';
a();

// a.ts
let a = 1;
let b = 2;
export default function() {
  a;
}
export function c() {
  b;
}

tree shaking 完成后应该如下。

// entry.ts
import a from './a'
a();

// a.ts
let a = 1;
export default function() {
  a;
}

这是怎么做到的？下面说下我的理解。

1、先对包含所有依赖的 Module Graph 做 Topo Sort 排序，让 dependent 始终在 dependency 之前，即「被依赖的始终在后」。因为一个文件（module）需要先知道自己有哪些被使用的地方，才知道怎么对自己做 Tree Shaking。

2、可能会有环（循环依赖）。比如 a 依赖 b 依赖 c 依赖 a，形成循环依赖后就无法很好地分析出当前模块的被使用情况，所以通常简单起见，会把整个环内的模块都当成有副作用，而不做 Tree Shaking 处理。

3、回到前面的例子。先分析 entry.ts