学习Webpack 的 Tree Shaking（摇树优化）以及如何精准的打包

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196081.html

1. Tree Shaking 是什么？
2. Tree Shaking 的运作
3. sideEffects
4. useExported
5. 总结

usedExports 与 sideEffects 不同的是，usedExports 可以以陈述句为单位去判断是否有 side effect，但是 sideEffects 可以让 Webpack 在打包的时候，直接略过一整个文件，只要是出现在 sideEffect 裡的文件就是直接打包，也不用透过 terser 评估副作用。

总结

1. Tree Shaking 只能在 static structure 使用，如果项目中的 babel 会将 static structure 编译成 dynamic structure 的话，要另外设置。
2. 使用 sideEffects 时，要写在 package.json，如果是要对第三方函式库优化，要写在 webpack.config.js 里的 optimization。
3. usedExports 才是 Tree Shacking，使用时会自动判断没使用的代码，并标记 unused harmony 的注解，要移除的话要另外使用 minify。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/