https://ithelp.ithome.com.tw/users/20065770/ironman/6302 在這個系列影集中，我希望跟大家一起研究 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 或前端開發的問題都歡迎提出。如果你喜歡我的頻道，歡迎幫我的影片按讚、訂閱、轉發我的影片，那對我會有很大的幫助，我們下集見！ #vite #原始碼解讀 ... https://www.youtube.com/watch?v=q3L9Zsj_oeA

12th iTHome 鐵人賽活動 https://ithelp.ithome.com.tw/users/20065770/ironman/3808 錄影設備：https://kit.co/eddiekao/my-online-course-recording-kit ... https://www.youtube.com/watch?v=po8i-VfHKNA

鐵人賽：https://ithelp.ithome.com.tw/users/20065770/ironman/6302 在這個系列影集中，我希望跟大家一起研究 Vite 的原始碼，希望通過閱讀 Vite 的原始碼更深入地了解 Vite 的工作原理，並且提升我們的 JavaScript 技能。 這集主要介紹在 HMR（Hot Module Replacement）跟一般的 Live Reload 有什麼差別，HMR 可以只抽換某個模組而不是全頁 reload，這在做比較複雜多步驟的應用程式的時候挺方便的 下一集將會跟大家介紹 Vite 裡的 HMR 是怎麼運作的，以及哪些情況會只更新部份模組，而哪些情況會是全頁 reload。 若各位有其他關於 Vite 或前端開發的問題都歡迎提出。如果你喜歡我的頻道，歡迎幫我的影片按讚、訂閱、轉發我的影片，那對我會有很大的幫助，我們下集見！ #vite #原始碼解讀 #鐵人賽 ... https://www.youtube.com/watch?v=GzgH8aXxwrs

鐵人賽：https://ithelp.ithome.com.tw/users/20065770/ironman/6302 在這個系列影集中，我希望跟大家一起研究 Vite 的原始碼，希望通過閱讀 Vite 的原始碼更深入地了解 Vite 的工作原理，並且提升我們的 JavaScript 技能。 最後一集我們就用 HMR（Hot Module Replacement）做個收尾，但這個是極其陽春的 HMR，主要是感受一下 HMR 大概是怎麼一回事... 同樣的，實作的影片時間會比較長，建議可把播放速度調整到 1.2 ~ 1.5 倍速，或是直接看 GitHub 的專案成果也行。 若各位有其他關於 Vite 或前端開發的問題都歡迎提出。如果你喜歡我的頻道，歡迎幫我的影片按讚、訂閱、轉發我的影片，那對我會有很大的幫助，我們下回見！ 參考連結： - GitHub Repo: https://github.com/kaochenlong/vivvi #vite #原始碼解讀 #鐵人賽 ... https://www.youtube.com/watch?v=GUbWYbyvpW4