webpack之Tree Shaking

Tree Shaking

Tree Shaking定义

• 树抖动（Tree Shaking），是JavaScript上下文中常用于消除死代码的术语
• 通俗：通过工具"摇"JS文件，将其中用不到的代码"摇"掉，提升运行性能

Tree Shaking原理

• 通过 DCE（dead code elimination），消除无效代码
• 依赖于ES2015模块语法的静态结构
  • es6 模块预编译，可做静态分析
  • cjs(commonJS)模块，动态导入

Dead Code 特征

• 代码不会被执行，不可到达
• 代码执行的结果不会被用到
• 代码只会影响死变量（只写不读）

不同模式测试

• 测试代码

// index.js
import {
    square } from './math'

const v = square(2) // 只读不写

// math.js
export function square(x) {
   
  return x * x;
}

1. development 模式

• 无 Tree Shaking
  

2. production 模式

• Tree Shaking
  

sideEffects

副作用使 Tree Shaking 失效

副作用： 一个函数会、或者可能会对函数外部变量产生影响的行为（日志，全局变量等）
结果：打包后，副作用代码保留，其他代码被删除

// index.js
import './menu'

// menu.js
function Menu() {
   
}

Menu.prototype.