webpack中tree-shaking原理

我在使用webpack过程中,很多次用到一个功能就是tree-shaking(树摇),这是一个十分形象的名字,这个功能实现webpack在打包过程中将没有使用的模块或者没有运行的代码干掉。
1、模块引入方案
在开始介绍tree-shaking的实现原理之前,我们先看下几种主流的模块引入方案:

  • AMD方案
  • CMD
  • commonjs
  • es6Module
主要看下后面两个:
  • commonjs:
    webpack中tree-shaking原理
    文章图片
  • es6module
    webpack中tree-shaking原理
    文章图片
对于es6Module和commonjs主要区别在于
  • 1、ES6 Module 输出的是值的引用,而 CommonJS 输出的是值的拷贝
  • 2、ES6 Module 是编译时执行,而 CommonJS 模块是在运行时加载
  • 3、CommonJs 是单个值导出,ES6 Module可以导出多个
  • 4、CommonJs 是动态语法可以写在判断里,ES6 Module 静态语法只能写在顶层
ES6Module 最大的特点就是静态化,在编译时就能确定模块的依赖关系,以及输入和输出的值,这意味意味着模块的依赖关系是确定的,和运行时的状态无关,可以进行可靠的静态分析,正是基于这个基础,才使得 Tree-Shaking 成为可能
【webpack中tree-shaking原理】即: tree-shaking依赖ES6module的静态分析
2、tree-shaking的功能
tree-shaking的功能主要是有两点:
  • 按需加载,即没有被引用的模块不会被打包进来;
  • 把加载后未使用的模块干掉
  • 把加载完毕的模块中的未使用的代码干掉
tree-shaking实现原理:
  • Tree-shaking = ES6odule(非default) + UglifyJS
  • 其中,es6module通过对模块进行静态分析,找到未引入模块和引入但未使用模块; UglifyJS实现对引入模块中未使用的代码进行干掉
参考: https://www.ruanyifeng.com/bl...

    推荐阅读