Tree-shaking 的其他注意事項 (WIP)

Tree-shaking 的其他注意事項 (WIP)

• 不同的 import 方式怎麼影響 tree-shaking
• lodash-es 實例示範
• 如何確認打包結果有成功完成 tree-shaking？
• 一個有趣的 TypeScript warning
• 各個 bundler 怎麼做到 tree-shaking？
• 結論

參考資料與延伸閱讀

幾乎把所有能查到討論 tree-shaking 的中、英文文章都看了一輪，也附上一些覺得可以延伸閱讀的部分，或想看看其他資源也可參考以下文章，感謝這些文章讓我能站在巨人的肩膀上：

• Webpack 官方文件 - Tree-shaking
• Rollup - tree-shaking、tree-shaking 設定
• web.dev - Reduce JavaScript payloads with tree shaking
• patterns.dev - Tree-shaking
• Deep Dive Into Tree-Shaking
• How To Make Tree Shakeable Libraries
• guychienll - 深入解析 Webpack Tree shaking
• Andy - 原來程式碼打包也有這麼多眉角 - 淺談 Tree Shaking 機制
• 神Q超人 - 精準的打包 — Webpack 的 Tree Shaking
• KyleMo - Day15 X Tree Shaking
• 前端實力三明治 - React 元件庫製造紀事錄 (三) – Rollup Bundler 實作，並探究 Webpack 的 Tree Shaking
• Webpack 中的 sideEffects 到底该怎么用？

另外若想補充了解什麼是 ESM 及 JS 的模組化觀念：

• javascript.info - Modules
• Huli - webpack 新手教學之淺談模組化與 snowpack
• PJCHENder - [JS] JavaScript 模組（ES Module, ESM）

因為我也是第一次深入看這個部分，如果文章中有哪裡需要勘誤或有任何問題，請在下方留言或私訊 IG 告訴我，也感謝你的閱讀！