tree shaking学习笔记

1.是什么？

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。Tree-shaking 是 DCE（dead code elimination） 的一种新的实现。

tree-shaking更关注于无用模块的消除，消除那些引用了但并没有被使用的模块。它依赖于 ES6模块系统中的静态结构特性，ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。

2.怎么用？

在项目 package.json 文件中，添加一个 "sideEffects" 入口,数组里的的文件表示不需要进行tree shaking。

"sideEffects": [

 "./src/some-side-effectful-file.js",

 "*.css"

]

当mode为production时， tree shaking自动的一些配置就已经写好了。

当在development模式下配置tree shaking时，需要做如下配置。

optimization: {

 usedExports: true

}

补充：

ES6 module 特点：

只能作为模块顶层的语句出现

import 的模块名只能是字符串常量

import binding 是 immutable的

Dead Code 一般具有以下几个特征：

•代码不会被执行，不可到达

•代码执行的结果不会被用到

•代码只会影响死变量（只写不读）