【告别普通打包】webpack打包结果优化特性：Tree Sharking 和 sideEffects

今天我将和你分享 Webpack 的两个高级特性，分别是 Tree Shaking 和 sideEffects。
它们都属于 Webpack 打包结果优化的必备特性，而且现在应用的也十分广泛。

1. Tree Shaking（摇树）

1.1 摇树讲解

Tree Shaking 翻译过来的意思就是“摇树”。伴随着摇树的动作，树上的枯树枝和树叶就会掉落下来。

我们这里要介绍的 Tree-shaking 也是同样的道理，不过通过 Tree-shaking “摇掉”的是代码中那些没有用到的部分，这部分没有用的代码更专业的说法应该叫作未引用代码（dead-code）。

Tree-shaking 最早是 Rollup 中推出的一个特性，Webpack 从 2.0 过后开始支持这个特性。

我们使用 Webpack 生产模式打包的优化过程中，就使用自动开启这个功能，以此来检测我们代码中的未引用代码，然后自动移除它们。

我们可以先来体验一下这个功能的效果，这里我的源代码非常简单，只有两个文件。

└─ 摇树
   ├── src
   │   ├── components.js
   │   └── main.js
   ├── package.json
   └── webpack.config.js

1.其中 components.js 中导出了一些函数，这些函数各自模拟了一个组件，具体代码如下：

// ./src/components.js
export const Button = () => {
   
  return document.createElement('button')
  console.log('dead-code')
}

export const Link = () => {
   
  return document.createElement('a')
}

export const Heading = level => {
   
  return document.createElement('h' + level)
}

其中 Button 组件函数中，在 return 过后还有一个 console.log() 语句，很明显这句代码永远都不会被执行，所以这个 console.log() 就属于未引用代码。

2.在 main.js 文件中只是导入了 compnents.js，具体代码如下：

// ./src/main.js
import {
    Button } from './components'
document.body.appendChild(Button())

但是注意这里导入 components 模块时，我们只提取了模块中的 Button 成员，那这就导致components 模块中很多地方都不会被用到，那这些地方就是冗余的，具体冗余部分如下：

// ./src/components.js
export const Button = () => {
   
  return document.createElement('button')
  // 未引用代码
  console.log('dead-code')
}
// 未引用代码
export const Link = () => {
   
  return document.createElement('a')
}
// 未引用代码
export const Heading = level => {
   
  return document.createElement('h' + level)
}

去除冗余代码是生产环境优化中一个很重要的工作，Webpack 的 Tree-shaking 功能就很好地实现了这一点。

我们打开命令行终端，这里我们尝试以 production 模式运行打包，具体命令如下：

$ npx webpack --mode=production

Webpack 的 Tree-shaking 特性在生产模式下会自动开启。打包完成以后我们打开输出的 bundle.js，具体结果如下：