webpack中tree-shaking原理
我在使用webpack过程中,很多次用到一个功能就是tree-shaking(树摇),这是一个十分形象的名字,这个功能实现webpack在打包过程中将没有使用的模块或者没有运行的代码干掉。
1、模块引入方案
在开始介绍tree-shaking的实现原理之前,我们先看下几种主流的模块引入方案:
- AMD方案
- CMD
- commonjs
- es6Module
- commonjs:
文章图片
- es6module
文章图片
- 1、ES6 Module 输出的是值的引用,而 CommonJS 输出的是值的拷贝
- 2、ES6 Module 是编译时执行,而 CommonJS 模块是在运行时加载
- 3、CommonJs 是单个值导出,ES6 Module可以导出多个
- 4、CommonJs 是动态语法可以写在判断里,ES6 Module 静态语法只能写在顶层
【webpack中tree-shaking原理】即: tree-shaking依赖ES6module的静态分析
2、tree-shaking的功能
tree-shaking的功能主要是有两点:
- 按需加载,即没有被引用的模块不会被打包进来;
- 把加载后未使用的模块干掉
- 把加载完毕的模块中的未使用的代码干掉
- Tree-shaking = ES6odule(非default) + UglifyJS
- 其中,es6module通过对模块进行静态分析,找到未引入模块和引入但未使用模块; UglifyJS实现对引入模块中未使用的代码进行干掉
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中,逐渐适应一个人到底意味着什么()
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- “成长”读书社群招募
- 2020-04-07vue中Axios的封装和API接口的管理