指南tree-shaking (树摇)
1. 什么是tree-shaking
Tree Shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。 rollup跟webpack都可以实现Tree Shaking
2. 为什么需要tree-shaking
在 ES6 之前，JavaScript 没有原生的模块系统，所有的 JavaScript文件都会被打包到同一个文件中，这会导致很多问题，比如：
- 体积过大，加载时间过长
- 代码无法复用，模块化效果不明显
- 代码调试不方便
3.tree-shaking的实现原理
静态分析：Tree-shaking的第一步是进行静态分析。在构建过程中，工具（如Webpack或Rollup）会分析整个代码库，建立模块之间的依赖关系图。
标记未使用代码：通过静态分析，工具可以识别出未被引用的模块、函数和变量。这些未被引用的代码被标记为"dead code"，表示它们不会在实际运行时被执行。
剔除未使用代码：一旦识别并标记了未使用的代码，构建工具就可以根据标记删除这些代码。这意味着最终生成的代码包将不包含未被使用的部分，从而减小文件大小。
ES6模块的优势：Tree-shaking的实现依赖于ES6模块系统的静态性质。ES6模块是静态的，这意味着在编译时，模块的导入和导出关系是确定的，不会受到运行时条件的影响。这为工具提供了可靠的基础，使它们能够在构建时检测未使用的代码。
逐层优化：Tree-shaking通常是逐层进行的。首先，工具会删除未使用的整个模块。然后，它会在模块内部进一步查找和删除未使用的函数和变量。这种逐层的优化确保了尽可能多的未使用代码被剔除。
需要注意的是，tree-shaking的效果还受其他因素的影响，例如代码的写法、模块的导出方式等。为了确保最佳的tree-shaking效果，开发者应该采用符合规范的ES6模块写法，并注意不要创建闭包或动态导入，因为这可能会阻碍工具的静态分析。
WARNING
Tree-shaking只适用于ES6模块，不适用于CommonJS模块。