webpack中tree-shaking原理

我在使用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...