webpack 之 Tree Shaking

（一）背景

在我们的代码中，有一些代码虽然写了，但是没有被调用或者被执行，比如定义了一个函数或者模块，但是没有被引入或者调用，这时候我们希望没有被引入或者调用的模块和函数就不要被webpack打包进去了，这样可以节省打包的时间和内存。Tree Shaking 的意思是摇树，摇晃树的时候，一些没有用的叶子都被要下来了，这就是 Tree Shaking 的含义

注意：Tree Shaking 只能在 ES Module ，也就是只支持 import 这种模块的引入，require 引入的不适用

（二） Tree Shaking 配置

先写一个小例子：

number.js:

function number () {
  var count = 0
  var dom = document.createElement('div')
  dom.innerHTML = count
  dom.onclick = function () {
    count++
    dom.innerHTML = count
  }
  document.body.appendChild(dom)
}

function add (a, b) {
  return a + b
}

export {
  number,
  add
}

index.js:

import { number } from './number'
number()

可以看出只用到了 number 方法，没有用到add 方法，这个时候npx webpack 打包，可以看见文件这部分

下面使用 Tree Shaking 打包，先配置Tree Shaking

先是配置 mode 模式，再与plugins同级下，写上下面代码：

optimization: {
    usedExports: true
  }

表明对于export 到处的模块，都是使用 Tree Shaking，然后在 package.json中配置，这个配置项的意思是哪些不需要Tree Shaking

"sideEffects": false,

再次 npx webpack 打包，就会发现打包后的文件，增加了一行

在 mode 是开发环境的时候，打包后的文件会标出哪些方法/模块使用了，没有使用过的模块仍会打包，为了便于开发环境调试。

（2）生产环境

生产环境只配置两个地方即可

首先：在 webpack.config.js 中

mode: 'production',

package.json 中：比如css不需要Tree Shaking

"sideEffects": [
    "*.css"
  ],

这样两个步骤配好了即可，再次打包，可以看出只有number 这个函数，没有add 这个函数了

总结：

（1）在 mode 是开发环境的时候，打包后的文件会标出哪些方法/模块使用了，没有使用过的模块仍会打包，为了便于开发环境调试。

（2）在 mode 是生产环境的时候，只需配置package.json 中，"sideEffects" 即可，其他的配置生产环境自动配置好了，无需进行手动配置

webpack 之 Tree Shaking

猜你喜欢