hooyantsing's Blog

P24 tree shaking

字数统计: 177阅读时长: 1 min
2020/12/01

尚硅谷2020最新版Webpack5实战教程

什么是tree shaking

树摇。使用到的组件相当于绿色的树叶,未使用到的组件相当于枯萎的树叶。通过摇晃树,去除枯萎的树叶。在这里,就是去除未使用的代码,精简代码体积。

如何使用

满足以下两个条件,即默认开启:

  1. 必须使用 ES6 模块化
  2. 开启 production 环境

如果遇到问题,可以尝试在 package.json 加入:

1
"sideEffects":false

所有代码都没有副作用,都进行 tree shaking。

问题:可能会把 css/@babel/polyfill文件干掉。

为了避免以上问题,可以排除:

1
"sideEffects":["*.css"]
CATALOG
  1. 1. 什么是tree shaking
  2. 2. 如何使用