webpack tree shaking 總結

原文連接 https://www.webpackjs.com/gui...

什麼是tree shaking

tree shaking 是一個術語，用於描述移除JavaScript 上下文中的未引用代碼

爲何能夠實現

它依賴ES2015 模塊系統中的靜態結構特性，例如import 和export

在webpack 中如何用

版本要求：webpack 4。 在package.json 中添加 sideEffects.

反作用的定義是，在導入時會執行特殊行爲的代碼，而不是僅僅暴露一個export 或多個export。例如 polyfill, 它影響全局做用域，而且一般不提供export。

• 若是全部代碼都不包含反作用，將其設置爲false. webpack 就能夠安全地刪除未用到的export 導出
• 若是你的代碼確實有一些反作用，你能夠爲sideEffects 提供一個數組。

ps: 任何導入的文件都會受到tree shaking 的影響。這意味着，若是在項目中使用相似css-loader 並導入css文件，須要將其添加到side effect 列表中，以避免在生成模式中無心將它刪除。

壓縮輸出

設置webpack mode: production 就能夠在bundle 中刪除那些未被引用的代碼

---

2019年第一篇