Tree-Shaking (自动剔除`dead-code`)

Tree-Shaking (自动剔除dead-code)

什么是Tree-Shaking？

在前端领域，这个概念是因为rollup.js而普及的。它的作用是让用户在打包程序的时候，消除哪些永远也不会被执行的代码，也就是说排除dead code。无论是rollup.js 还是 webpack， 都支持Tree-Shaking.
而使用Tree-Shaking有一个前提条件，即模块必须是ESM(ES Module)。

下面举个例子

我们有一个demo工程

01 ├── demo
02 │ └── package.json
03 │ └── input.js
04 │ └── utils.js

文件内容分别是：

//input.js
import { foo } from './utils.js'
foo()

//utils,js
export function foo (obj){
    obj && obj.foo
}

export function bar (obj){
    obj && obj.bat
}

上面是一个很直观且简单的例子，utils.js文件中导出了两个函数，分别是foo与bar，然后在input.js中导入了foo函数并执行。但是我们并没有导入bar函数。

下面我们使用 rollup.js 进行构建：

npx rollup input.js -f esm -o bundle.js

使用input.js作为入口，打包出来的文件为bundle.js

// bundle.js
function foo(obj){
    obj&&obj.foo
}

foo();

我们不难发现，在最终生成的bundle.js中，我们没有发现utils.js中导出的bar函数，这是为什么呢？就是因为这块代码在至始至终都没有被使用到，所以它被当成dead code被删除了。

思考

聪明的你应该也发现了，fooh函数的执行好像也没有起到任何的作用？我们能否也直接进行删除呢？为什么rollup在打包时没有将它剔除？下节继续聊~