webpack(九)之Tree Shaking

什么是tree shaking

Tree Shaking 是一个术语，在计算机中表示消除死代码

 

webpack实现 tree shaking 有两种方案

1. usedExports：通过表及某些函数是否被使用，之后通过Terser来进行优化

2. sideEffects：跳过整个模块/文件，直接查看文件是否有副作用

 

1. usedExports

usedExports 的 目的是标注出未被使用的函数，由Terser将未使用的函数从代码中删除

2. sideEffects

告知webpack 哪些模块存在副作用

 

css 实现 tree shaking

使用purgeCSS来清除未使用的css

 

tree shaking原理

利用es6模块的特点：

只能作为模块顶层的语句出现

import的模块名只能是字符串常量，不能动态引入

import binding是immutable,引入的模块不能再做修改