浅析浅析webpack 如何优雅的使用如何优雅的使用tree-shaking（摇树优化）（摇树优化）
主要介绍了webpack 如何使用tree-shaking（摇树优化）,本文介绍了什么是tree-shaking,commonJS 模块,es6
模块,怎么使用tree-shaking等,具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
1.什么是什么是tree-shaking
webpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js，先如今，webpack 2也有类似的
做法。
webpack 里的tree-shaking的到来不得不归功于es6规范的模块。为什么这么说，如今的前端模块规范很多，比较出流行的比
如commonJS , AMD , es6 ，我简单的说一下commonJS和es6模块的区别。
commonJS 模块模块
commonJS的模块规范在Node中发扬光大，总的来说，它的特性有这几个：
1.动态加载模块动态加载模块
commonJS和es6的最大区别大概就在于此了吧，commonJS模块的动态加载能够很轻松的实现懒加载，优化用户体验。
2.加载整个模块加载整个模块
commonJS模块中，导出的是整个模块。
3.每个模块皆为对象每个模块皆为对象
commonJS模块都被视作一个对象。
4.值拷贝值拷贝
commonJS的模块输出和 函数的值传递相似，都是值的拷贝
es6 模块模块
1.静态解析静态解析
即在解析阶段就确定输出的模块，所以es6模块的import一般写在被引入文件的开头。
2.模块不是对象模块不是对象
在es6里，每个模块并不会当做一个对象看待
3.加载的不是整个模块加载的不是整个模块
在es6模块中经常会看见一个模块中有好几个export 导出
4.模块的引用模块的引用
es6模块中，导出的并不是模块的值拷贝，而是这个模块的引用
在结合es6模块和commonJS模块的区别之后，我们知道es6的特点是静态解析，而commonJS模块的特点是动态解析的，因
此，借于es6模块的静态解析，tree-shaking的实现才能成为可能。
在webpack中，tree-shaking指的就是按需加载，即没有被引用的模块不会被打包进来，减少我们的包大小，缩小应用的加载
时间，呈现给用户更佳的体验。
2.怎么使用怎么使用tree-shaking
说了这么多那到底如何使用tree-shaking呢？
webpack默认es6规范编写的模块都能使用tree-shaking。这是什么意思呢？下面来看个例子。
首先奉上我的demo目录如下：
├─dist
└─index.html
├─node_modules
└─...
├─src
├─scripts
├─assets
├─webpack.config.js
评论0