webpack的tree Shaking原理是什么？

webpack的tree Shaking原理是什么？这是一道非常高频的webpack面试题，但是大多数同学可能都回答不出来，老规矩，点赞收藏支持一下，给我一分钟，理想哥教大家该怎么满分回答这个问题。如果我是求职者，我会这么回答：

Tree Shaking，摇树机制是webpack的一种代码优化策略，它会在运行过程中静态分析模块之间的导入导出，确定 ES Module 模块中哪些导出值未曾被其它模块使用，就是我们常说的死代码，将死代码删除，从而减少打包文件的体积，从而提高应用程序的性能。

Tree Shaking 是在Rollup 中率先实现，Webpack 自 2.0 版本开始接入，至今已经成为一种应用广泛的性能优化手段。

Tree Shaking的工作原理主要有以下三步：

第一步，主要是做静态分析。在Webpack构建过程中，它会对所有模块的依赖关系进行静态分析。它会构建一个依赖图，其中包括各个模块之间的依赖关系。

第二步，主要是标记未使用代码。在分析期间，Webpack会通过识别导入语句和变量是否被引用，从而判断出是否被使用，如果一个模块的导出在整个应用程序中未被引用，那么这个模块就会被标记为未使用。

第三步，生成输出文件： Webpack会根据标记的结果生成最终的输出文件。在输出文件中，未使用的模块和导出将被移除，从而减小打包产物的大小。

ES Module中，import语法因为可以在代码不运行的情况下，就能分析出不需要的代码。所以可以完美的使用tree shaking。而CommonJS支持动态加载模块，在加载前是无法确定模块是否有被调用，所以并不支持tree shaking。

以上就是这个问题的回答了，大家可以下次面试时试试这么回答看看效果。

最后，欢迎关注理想哥，每天学点前端面试小技巧。