Tree Shaking 是一种通过静态分析的方式，剔除无用 Javascript 代码的技术。当开发者使用模块化的方式编写代码时，往往会引入一些并未使用的模块或者函数，这些代码虽然不会报错，但在浏览器中运行时却会增加页面加载时间和 JavaScript 大小。因此，Tree Shaking 技术的优化效果是非常明显的。
Webpack 作为一款流行的前端打包工具，内置了支持 Tree Shaking 的功能。在本文中，我们将会详细讨论如何使用 Webpack 实现 Tree Shaking。
Webpack 如何实现 Tree Shaking？
Webpack 提供了一种将 ES6 模块化语法转换成 CommonJS 模块化语法的机制，这种机制非常适合实现 Tree Shaking。
在具体实现上，Tree Shaking 的核心就是通过静态分析的方式，标记出哪些代码不需要被打包进行。Webpack 的实现机制如下：
执行代码静态分析：Webpack 会检查源码文件，并寻找依赖项和函数调用等情况。
将代码转换成 AST：AST（Abstract Syntax Tree） 代表抽象语法树，这种树形结构可以准确地描述源代码的结构。Webpack 将代码转换成 AST 后，可以通过递归分析 AST 树的方式，分析出哪些模块、函数、变量是被使用到的。
进行模块的标记和剔除：Webpack 会记录下每个模块的被引用情况，并标记每个模块被使用的状态。对于未被使用的模块，Webpack 会将其剔除。
对于 Tree Shaking 的支持，Webpack 主要依靠了 ES6 模块化语法和 UglifyJS 插件。ES6 模块默认采用静态引用的方式进行引用，因此这种引用机制也方便了静态分析。而 UglifyJS 插件则可以在打包过程中，通过压缩和剔除未被使用的代码。在 Webpack 4 中，也提供了 mode 属性来支持 tree shaking，使用 mode 为 production 即可默认开启 tree shaking 功能。
如何在 Webpack 中开启 Tree Shaking？
要实现 Tree Shaking，首先需要在 Webpack 配置文件中开启这个功能。在 webpack.config.js 中进行如下配置：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
-------- ---------------
--
--
--
--这里的 mode 属性设置为 production，表示开启打包模式，包括 Tree Shaking。同时，需要将 ES6 语法转换成浏览器可以识别的语法，可以使用 Babel Loader 来进行转义。
在代码中，需要注意以下几点：
在 ES6 语法中，需要使用 import 和 export 关键字引入导出模块，而不是使用 require 等 CommonJS 语法。
在函数调用时，需要将函数定义为纯函数。纯函数是一种不依赖于外部状态的函数，只依赖于传入的参数计算后返回结果的函数。这种函数可以帮助 Tree Shaking 判断哪些函数可以被剔除。
示例代码如下：
-- -------------------- ---- ------- -- ------ ------ -------- ------ -- - ------ - - -- - -- -------- ------ -------- -------- -- - ------ - - -- - -- -------- ------ - --- - ---- -------- -------- --------- - ------ --- -- --- - ----- ------ - ------ ---
总结
通过使用 Webpack 实现 Tree Shaking，我们可以在打包过程中，尽量减少打包后的 JavaScript 代码量，避免不必要的网络请求和加载时间。同时，通过本文的示例代码，我们也可以看到 ES6 模块化语法的使用方式，以及纯函数的定义方式，这些知识点对于使用 Webpack 进行前端开发都有重要的帮助作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493f69848841e98941867ef