Webpack5 系列（五）：Tree Shaking

---

theme: jzman

highlight: atelier-cave-light

一、前言

上一篇讲到对JS语法的处理，本篇将介绍 Tree Shaking 。

```jsx // math.js const add = (a, b) => a + b; const minus = (a, b) => a - b; export { add, minus }

// main.js const { add } from 'math.js' console.log(add(1, 2)); ```

我们经常会在主文件或者组件文件中引入其他模块中的代码，但实际上我们只用其中的一部分，剩下的代码则不需要引入。然而在默认情况下，仍然是全部引入并打包的。

这时，为了把多余部分剔除出去，就要用到 “Tree Shaking” 了，也就是摇树。

二、如何理解 Tree Shaking？

小时候，为了吃到树上的果子，我们会调皮地摇晃一棵树，在千般折腾下，枯叶便会纷纷落地，成熟的果子也会，这些都是不该留在树上的。同理，经过 Tree Shaking，不该留在代码中的多余代码，则会被摇掉 (例如上面代码中，math.js 模块中的 minus 就会被摇下来，不参与打包)，这样就减轻了代码量，提高性能。

三、哪些引入方式可以使用 T