1、是什么？tree shaking，这个还是一个比较重要的一个东西吧，可以大大的优化你的项目。
git仓库：webpack-demo
-
我们首先从字面意思上来理解一下，tree shaking翻译一下就是摇树罗，摇树的时候就会把不必要的枯枝烂叶给摇下来，同理，到代码中，tree shaking就是把没有用到的代码shaking掉。
-
tree-shaking只有使用es6的模块化规范才有效，如果你使用commonJs模块化规范是搞不了tree-shaking的，为什么？
2、配置开发环境因为ES6模块是运行时加载（静态加载），即可以在编译时就完成模块加载，使得编译时就能确定模块的依赖关系，可以进行可靠的静态分析，这就是tree shaking的基础。
而CommonsJs必须在跑起来运行的时候才能确定依赖关系，所以与不能tree-shaking。
– 参考阮大神的讲解–>Module 的语法
概述
-
如果你看要tree-shaking的一个具体的效果，那么你需要在mode:development中，因为在生产环境的时候，webpack会自动帮我们做tree-shaking。
-
示例代码可以直接看官网的，大概就这么几个配置：
-
设置usedExports为true
mode: 'development',
optimization: {
usedExports: true,
},
- package.json中设置下sideEffects，也可以是一个数组如"sideEffects": ["*.css"]就表示所有引入的css文件不做tree-shaking。
{
"name": "webpack-easy-demo",
+ "sideEffects": false,
}
- 这里配置好了就ok了，但是有个最大的问题是什么，看官网是这么说的：
Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of the popular Babel preset @babel/preset-env - see the documentation for more details).
要确保没有编译器把es6的语法转换为require这种commonJs的这种写法，但是babel的这个@babel/preset-env配置的默认行为就是如此。
- 我们配置使用bable配置es6的时候就要使用了这个，如此一来，岂不凉了？为了不让babel将es6的import/expot转为commonJs规范的require写法，我们需要这样：
{
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs: { version: 3, proposals: true },
+ // 禁止将import/export转为require写法
+ modules: false
}
]
]
}
}
- 配置生产环境就很简单了。
- 将mode设置为production；
- 设置下sideEffects;
- 设置下bable配置modules: false。
-
根据官网的conclusion总结，开启tree-shaking有四点：
- 必须使用es6的模块化规范（import/export）;
- 要确保你的编译器不会将es6的import/expot转为commonJs规范的require写法；（所以我们需要将@babel/preset-env的modules参数设置为false）
- 在package.json中添加sideEffects告诉webpack哪些是不用tree-shaking的文件。
- 模式mode要为production，因为production会自动使用terser-webpack-plugin这个插件来做一些压缩、无用代码的剔除实现tree-shaking。
-
这块内容有点东西啊，也不知道我理解的对不对，看看别人的文章吧：
- https://juejin.im/post/5a4dc842518825698e7279a9
- https://es6.ruanyifeng.com/#docs/module
- https://juejin.im/post/5d706172f265da03ca118d28
- https://juejin.im/post/5dcec27d5188254b0147e619
- https://webpack.js.org/guides/tree-shaking/#conclusion
