webpack 之 tree shaking

tree shaking (摇树优化)

image.png

webpack 2.0中引入 tree shaking

• AST(抽象语法树) 可以把一段 js代码的每一个语句都转化为树中的一个节点

• DCE (Dead Code Elimination)-无用代码消除。优点：
  减少程序提交／减少程序执行时间／便于将来程序优化
  Dead Code 主要包括：

  
  
  image.png

1. 程序中没有执行的代码（如不可能进入的分支，return之后的语句等）
2. 导致 dead variable的代码（写入变量之后不再读取的代码）

tree shaking 是 DCE的一种新的方式，找出使用的代码，排除不使用的代码

实现方式
基于es6的静态引用，tree shaking 通过扫描所有的es6的 export，找出被import 的内容并添加到最终代码中，webpack的实现是把所有import标记为有使用／无使用两种，在后续压缩时进行区别处理

配置方法

// .babelrc
{
  "presets" : [
    ["es2015", {"modules": false}] // 设置false,表示不对es6模块进行处理，不将模块转化成CommonJS模块
  ]
}

webpack 3 / 4 不配置此文件 也可正常执行

---

uglify 完成了 js 的DCE

副作用

webpack + uglify 只能处理函数和顶层的 import／export 变量，不能把没用到的类消除掉

image.png

原文参考:
https://blog.csdn.net/VhWfR2u02Q/article/details/81916786
https://juejin.im/post/5a4dc842518825698e7279a9