Tree Shaking的使用和原理分析

tree shaking(摇树优化)

• 概念：1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在uglify 阶段被擦除掉
• 使用：
  • webpack 默认支持，在 .babelrc 里设置 modules: false 即可
  • production mode的情况下默认开启
• 要求：
  • 必须是 ES6 的语法，CJS 的方式不支持
  • 需要tree shaking的模块代码是没有副作用的，否则tree shaking会失效

副作用

• 副作用这个概念来源于函数式编程(FP)，纯函数是没有副作用的，也不依赖外界环境或者改变外界环境。纯函数的概念是：接受相同的输入，任何情况下输出都是一样的。
• 非纯函数存在副作用，副作用就是：相同的输入，输出不一定相同。或者这个函数会影响到外部变量、外部环境。
• 函数如果调用了全局对象或者改变函数外部变量，则说明这个函数有副作用

DCE (Dead code elimination)

• 没有导入和使用

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

  if (false) {
      console.log('false')
  }

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

  • 执行函数返回结果，结果没有赋值给变量。
  • 执行函数返回结果，结果赋值给变量。但是变量没有被使用。

  import {func2} from './functions';
  func2();

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

  • 定义了一个变量，修改了它的值，但是并没有使用。

Tree-shaking 原理

• 利用 ES6 模块的特点:
  • 只能作为模块顶层的语句出现
  • import 的模块名只能是字符串常量，不能动态引入模块
  • import binding 是 immutable的，引入的模块不能再进行修改
• 代码擦除： uglify 阶段删除无用代码

参考

• 玩转webpack-全方位掌握webpack核心技能和优化策略