随着前端领域的不断发展，ES6 成为 Web 开发中的标准之一。而 Babel 是编译器中的佼佼者，可以将 ES6 + 代码转换为 ES5 以支持更老的浏览器，同时还能提供一系列的插件，例如 Tree Shaking。
什么是 Tree Shaking
Tree Shaking 又称为插件消除，它是指编译器在编译时从代码中自动移除那些没有用到的代码，以减少最终代码的体积并提高加载速度。这个功能实现的原理是基于 ES6 的模块化规范，即在编译之前会对模块进行静态分析，找出哪些模块被使用了，哪些被丢弃了。
如何使用 Tree Shaking
一、准备工作
首先，在项目中安装 Babel 和相关插件：
--- ------- ---------- ----------- ----------------- ------------
其中，@babel/core 是 Babel 的核心包，@babel/preset-env 是用于转换代码的预设包，babel-loader 是与 webpack 集成使用的加载器。
二、配置 webpack
在 webpack 的配置中，使用 babel-loader 来加载 ES6 + 代码，并启用 Tree Shaking。配置如下：
-------------- - -
-----
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------- - -------- ----- ---
-
-
-
-
-
-这里需要注意的是，在 @babel/preset-env 的配置中，modules 设置为 false，表示编译后的代码中不需要重新建立模块系统，而是保持 ES6 的模块化规范。
三、编写 ES6 + 代码
在编写 ES6 + 代码时，需要满足以下条件：
- 使用 ES6 的模块化规范，即
import和export - （可选）使用
const或let声明变量 - （可选）使用箭头函数和解构赋值等其他 ES6 + 语法
例如：
-- ------------ ------ - --- - ---- ----------- ----- ------ - ------ -- -------------------
四、测试 Tree Shaking
在 sum 函数中，添加一行无用的代码，例如：
------ -------- ------ -- - ------------------- ------ ------ - - - -
然后编译并运行项目：
--- --- -----
可以看到输出结果中没有 console.log 的信息了，表示 Tree Shaking 生效了。
总结
通过上述步骤，就能获得一个优化过的 JavaScript 代码，减少代码体积的同时加快网页的加载速度，提升用户体验。但需要注意的是，Tree Shaking 只适用于 ES6 的模块化规范，如果使用 CommonJS 或 AMD 规范，则无法生效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a3a7a548841e989400574f