说说Tree-Shaking的工作原理（杭州阿里1面）

[LLwanran]

当前端项目达到一定的规模后，我们一般会采用按模块方式组织代码，这样可以方便代码的组织及维护。但会存在一个问题，比如我们有一个utils工具类，在另一个模块中导入它。这会在打包的时候将utils中不必要的代码也打包，从而使得打包体积变大，这时候就需要用到Tree Shaking技术了

Tree Shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫Dead code elimination

Tree Shaking在前端界由 rollup 首先提出并实现，后续webpack在2.x版本也借助于UglifyJS实现了。自那以后，在各类讨论优化打包的文章中，都能看到Tree-Shaking的身影

从webpack 2开始支持实现了Tree Shaking特性，新的webpack 4 正式版本，扩展了这个检测能力，通过package.json的 sideEffects 属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是 "pure(纯的 ES2015 模块)"，由此可以安全地删除文件中未使用的部分

总结：

• Tree Shaking 不支持动态导入（如CommonJS的require()语法），只支持纯静态的导入（ES6的import/export）
• webpack中可以在项目package.json文件中，添加一个 "sideEffects" 属性,手动指定由副作用的脚本
• Tree Shaking 其实很好理解：一颗树，用力摇一摇，枯萎的叶子会掉落下来，剩下的叶子都是存活的