Webpack 是如何实现 treeShaking 的？

Question

webpack 实现 tree shaking 的原理是基于 ES6 模块化语法的静态特性。

在编译阶段，Webpack 会根据模块的依赖关系，通过 AST（抽象语法树）进行静态分析，识别出那些代码块（函数、变量、对象等）被引用并且使用了。然后将这些代码块打包输出到最终的打包文件中。在这个过程中，Webpack 会自动将未被引用的代码块进行剔除，这个过程就是 tree shaking。

具体来说，当 Webpack 在打包时遇到一个 ES6 模块导入语句（import），它会自动去加载这个模块并分析其导出对象。然后它会分析项目中哪些导出对象被引用了。如果一个导出对象没有被引用，那么 Webpack 会直接把它从最终的代码中剔除掉。

需要注意的是，tree shaking 只对 ES6 模块生效，对于 CommonJS 等其他模块化规范，由于其动态加载特性，无法在静态分析阶段确定哪些代码块被引用，因此无法进行 tree shaking。

另外，为了使 Webpack 能够正确识别和剔除未引用的代码块，开发者也需要做出一定的努力，例如将代码编写为纯函数的形式，避免使用全局变量等副作用等。

具体哪些会导致 tree shaking 失效，可以看这个文章： #235