我在应用webpack过程中，很屡次用到一个性能就是tree-shaking(树摇)，这是一个非常形象的名字，这个性能实现webpack在打包过程中将没有应用的模块或者没有运行的代码干掉。

1、模块引入计划

在开始介绍tree-shaking的实现原理之前，咱们先看下几种支流的模块引入计划：

  • AMD计划
  • CMD
  • commonjs
  • es6Module

次要看下前面两个：

  • commonjs：
  • es6module

对于es6Module和commonjs次要区别在于

  • 1、ES6 Module 输入的是值的援用，而 CommonJS 输入的是值的拷贝
  • 2、ES6 Module 是编译时执行，而 CommonJS 模块是在运行时加载
  • 3、CommonJs 是单个值导出，ES6 Module能够导出多个
  • 4、CommonJs 是动静语法能够写在判断里，ES6 Module 动态语法只能写在顶层

ES6Module 最大的特点就是动态化，在编译时就能确定模块的依赖关系，以及输出和输入的值，这象征意味着模块的依赖关系是确定的，和运行时的状态无关，能够进行牢靠的动态剖析，正是基于这个根底，才使得 Tree-Shaking 成为可能

即： tree-shaking依赖ES6module的动态剖析

2、tree-shaking的性能

tree-shaking的性能次要是有两点：

  • 按需加载，即没有被援用的模块不会被打包进来；
  • 把加载后未应用的模块干掉
  • 把加载结束的模块中的未应用的代码干掉

tree-shaking实现原理：

  • Tree-shaking = ES6odule（非default） + UglifyJS
  • 其中，es6module通过对模块进行动态剖析，找到未引入模块和引入但未应用模块； UglifyJS实现对引入模块中未应用的代码进行干掉

参考： https://www.ruanyifeng.com/bl...