随着前端领域的不断发展，ES6 成为 Web 开发中的标准之一。而 Babel 是编译器中的佼佼者，可以将 ES6 + 代码转换为 ES5 以支持更老的浏览器，同时还能提供一系列的插件，例如 Tree Shaking。
什么是 Tree Shaking
Tree Shaking 又称为插件消除，它是指编译器在编译时从代码中自动移除那些没有用到的代码，以减少最终代码的体积并提高加载速度。这个功能实现的原理是基于 ES6 的模块化规范，即在编译之前会对模块进行静态分析，找出哪些模块被使用了，哪些被丢弃了。
如何使用 Tree Shaking
一、准备工作
首先，在项目中安装 Babel 和相关插件：
npm install --save-dev @babel/core @babel/preset-env babel-loader
其中，@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 + 语法
例如：
// src/index.js
import { sum } from './math.js'
const result = sum(1, 2)
console.log(result)四、测试 Tree Shaking
在 sum 函数中，添加一行无用的代码，例如：
export function sum(a, b) {
console.log('unused code')
return a + b
}然后编译并运行项目：
npm run build
可以看到输出结果中没有 console.log 的信息了，表示 Tree Shaking 生效了。
总结
通过上述步骤，就能获得一个优化过的 JavaScript 代码，减少代码体积的同时加快网页的加载速度，提升用户体验。但需要注意的是，Tree Shaking 只适用于 ES6 的模块化规范，如果使用 CommonJS 或 AMD 规范，则无法生效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3a7a548841e989400574f