usedExports
与 sideEffects
不同的是,usedExports
可以以陈述句为单位去判断是否有 side effect
,但是 sideEffects 可以让 Webpack 在打包的时候,直接略过一整个文件,只要是出现在 sideEffect
裡的文件就是直接打包,也不用透过 terser
评估副作用。
总结
- Tree Shaking 只能在
static structure
使用,如果项目中的babel
会将static structure
编译成dynamic structure
的话,要另外设置。 - 使用 sideEffects 时,要写在
package.json
,如果是要对第三方函式库优化,要写在webpack.config.js 里
的optimization
。 usedExports
才是 Tree Shacking,使用时会自动判断没使用的代码,并标记unused harmony
的注解,要移除的话要另外使用minify
。