Tree Shaking?

153 阅读1分钟

什么是Tree Shaking?

官网描述

tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。

webpack 2 正式版本内置支持 ES2015 模块(也叫做 harmony modules)和未使用模块检测能力。新的 webpack 4 正式版本扩展了此检测能力,通过package.json 的 "sideEffects"  属性作为标记,向 compiler 提供提示,表明项目中的哪些文件是 "pure(纯正 ES2015 模块)",由此可以安全地删除文件中未使用的部分。

它是一种用于提高页面性能的优化方式,它会删除javascript上下文中未引用的代码,依赖Es6模块语法的静态结构特性如import、export(就是说在打包过程中,将代码永远不会走的片段删除,通过静态分析模块之间的导入导出,确定哪些导出值没有被使用饼打上标记将其删除。从而实现打包速度),通过 package.json 中的 sideEffect 做的标记,表明项目中哪些文件是纯正的Es6模块,因此可以删除文件中未使用的部分(可以通过在启动webpack时追加参数 --optimize-minimize 来实现)。

Tree Shaking官网描述