随着前端项目的复杂度越来越高，JavaScript 的代码量也在不断增加。这就使得项目的打包体积变得越来越大，需要更长的加载时间，降低了用户的体验感受。为了解决这个问题，我们可以通过 tree shaking 技术来减小打包体积。
什么是 tree shaking？
Tree shaking 是一个用于消除 JavaScript 中未被使用代码（dead-code）的技术，其原理是基于 ES6 模块化语法中的静态结构特性，可以对代码进行静态分析，识别出无用的代码并将其从最终的生成的包中删除。相比于传统的在运行时删除无用代码的方式，在编译阶段进行删除可以大大减小打包后文件的大小。
如何启用 tree shaking？
在使用 Webpack 构建项目时，要启用 tree shaking 需要符合以下两个条件：
- 使用 ES6 模块化语法，即
import和export。 - 在 Webpack 的配置文件中启用压缩选项，其中包括 UglifyJSWebpackPlugin 或 TerserWebpackPlugin 等压缩工具。
其中，使用 UglifyJSWebpackPlugin 可以通过设置 uglifyOptions 中的 warnings: true 提醒我们哪些代码并没有被 tree shaking 所消除。
以下是一个示例 Webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
--
-------- -
--- ----------------
-------------- -
--------- ----
-
--
-
--如何在 React 项目中使用 tree shaking？
在 React 项目中，我们还需要涉及到以下两个方面：
- 使用
react-dom包导入 React 的组件，而不是用整个react包。 - 使用按需加载的方式（lazy load）异步加载组件。
以下是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
-- - --------- --------
------ - ------------- -- ------- ----- - ---- ------------
-- ------
----- -------- - ------------- -- ----------------------
----------------
--------------- ---------------------------------
--------
------ ----- -------- -------------------- --
---------
------------------
-------------------------------
--总结
使用 tree shaking 技术可以有效的减小 React 项目打包后的体积，提高用户体验。需要注意的是，在开发过程中应该尽可能使用 ES6 模块化语法，并在 Webpack 配置中启用压缩选项。同时，在构建 React 项目时，还需要按照上述步骤使用 react-dom 包导入组件、异步加载组件等方式，才能真正实现 tree shaking 的减小效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651bbda195b1f8cacd35d447