30 天影集播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDICcanFF

Youtube 連結：https://www.youtube.com/watch?v=q3L9Zsj_oeA

在這個系列影集中，我希望跟大家一起研究 Vite 的原始碼，希望通過閱讀 Vite 的原始碼更深入地了解 Vite 的工作原理，並且提升我們的 JavaScript 技能。

今天我想要向大家介紹一個可能已經耳熟能詳的概念，那就是 import。或許對許多人來說，這個概念並不陌生，只要稍微熟悉 JavaScript 的人都應該已經接觸過。

在官方文件中提到了 Vite 的特性之一是會幫你做 Dependency Resolving 跟 Pre-Bundling。你可能會好奇，為什麼需要解決這個問題？畢竟，現代瀏覽器已經原生支援了 ESM 的 import 語法，為什麼還需要額外處理這些事情呢？

原因之一在於，有些模組並不是純粹的 ESM，它們可能是 CommonJS 或 UMD 模組，為了確保相容性 Vite 需要先處理一下這些模組。此外還有效能的考量。舉個例子，我們可能會使用一個廣泛使用的套件，例如 Lodash 它內部包含超過 600 個模組。如果你在瀏覽器中直接使用 import 語法，可能會導致同時發出多個 HTTP 請求。即使伺服器能夠處理這麼多請求，但大量的請求仍然會對性能產生影響。

Vite 在這方面的優勢就顯而易見了。當你使用 Vite 或類似的工具時，你會發現你不再需要擔心這些細節。你可以直接使用 import 語法，而 Vite 會為你處理所有的路徑解析和依賴解析。這使得開發過程更加流暢，不需要擔心模組的具體位置。

同時在 Vite 中會使用 esbuild 來做 Pre-Bundling 打包，在下一集中，我們將會看看 Vite 是怎麼做 Pre-Bundling 的。

若各位有其他關於 Vite 或前端開發的問題都歡迎提出。如果你喜歡我的頻道，歡迎幫我的影片按讚、訂閱、轉發我的影片，那對我會有很大的幫助，我們下集見！

參考資料

• Dependency Pre-Bundling https://vitejs.dev/guide/dep-pre-bundling.html