vite 系列
00-聊一聊 vite
01-vite 等構建工具對比
02-vite 實戰入門
vite 是什麼？
Vite 是一個由 Evan You（Vue.js 的創造者）開發的現代化構建工具，旨在為前端開發提供更快、更流暢的體驗。
Vite 的設計目標是解決傳統構建工具（如 Webpack）在開發過程中存在的一些效能瓶頸，特別是在冷啟動和熱更新（HMR）方面。
Vite 利用了現代瀏覽器的特性，例如原生 ES 模組和 HTTP/2，以加速開發和生產構建流程。
Vite 的主要特點
-
極速冷啟動：
- Vite 透過利用瀏覽器對 ES 模組的原生支援，實現了按需載入。在開發模式下，Vite 不需要對整個專案進行打包，而是根據請求動態載入需要的檔案，避免了傳統構建工具在啟動時需要處理大量檔案的問題。
-
基於 ES 模組的開發模式：
- 在開發模式下，Vite 利用了現代瀏覽器對原生 ES 模組的支援。瀏覽器直接請求模組檔案，而不是經過複雜的打包過程。這種方式大大縮短了冷啟動時間。
- 當你修改原始碼時，Vite 僅重新載入變更的模組，而無需重新構建整個應用。
-
快速熱模組替換（HMR）：
- Vite 提供了快速的熱模組替換功能。當你修改程式碼時，Vite 會僅更新變更的部分，而不會重新整理整個頁面。這使得開發過程更加高效，特別是在大型專案中。
- 由於 Vite 使用原生 ES 模組，它能夠精確地追蹤哪些模組發生了變化，快速傳遞變更給瀏覽器。
-
開箱即用的最佳化：
- Vite 預設內建了很多最佳化，如：程式碼分割、自動載入模組、支援 Vue、React、TypeScript 等主流技術棧，以及內建支援 PostCSS、CSS Modules 和靜態資源處理等。
- 開發者無需手動配置複雜的工具鏈（如 Webpack 或 Babel），Vite 預設啟用了很多最佳實踐，並且支援高度的自定義。
-
支援生產構建最佳化：
- Vite 在生產構建時依賴 esbuild，這是一個高效的 Go 語言編寫的打包工具，能夠在非常短的時間內完成程式碼轉譯、壓縮和最佳化操作。
- Vite 對 JavaScript、CSS 和靜態資源進行最佳化，使得構建出來的產物非常高效，支援程式碼分割和懶載入。
-
外掛生態：
- Vite 提供了強大的外掛機制。你可以透過外掛來擴充套件其功能，整合其他工具或調整構建流程。
- Vite 的外掛系統與 Rollup 外掛相容，因此可以使用大量現有的 Rollup 外掛。
-
支援多種前端框架：
- Vite 原生支援 Vue 和 React，但也支援其他框架，如 Svelte、Preact、LitElement 等。
- 透過安裝相應的外掛，你可以在 Vite 中使用任何主流框架。
Vite 主要特性介紹
1. 開發模式
-
ES 模組支援：Vite 利用瀏覽器原生支援的 ES 模組，按需載入模組，無需一次性打包整個專案。這樣做的好處是，開發時啟動速度更快，且更新速度更快。
-
動態匯入：Vite 支援原生的動態
import()語法，能在需要時動態載入模組。 -
快速 HMR：Vite 對每個模組有更精確的熱更新支援，模組變動時只更新有變化的部分，而不是重新載入整個頁面。
2. 構建模式
-
基於 esbuild：Vite 在生產構建時使用 esbuild 進行 JavaScript 和 CSS 的壓縮、轉譯和打包。esbuild 是一個用 Go 編寫的構建工具，效能非常高，能夠大幅縮短構建時間。
-
程式碼分割：Vite 預設支援程式碼分割功能，能夠將你的應用分為多個模組，以便按需載入，最佳化載入時間。
-
自動壓縮：Vite 會自動對生產環境的程式碼進行壓縮，以減小檔案體積。
3. 外掛系統
-
Rollup 外掛支援：Vite 的外掛機制與 Rollup 相容，你可以使用大部分現有的 Rollup 外掛，也可以編寫自己的外掛來擴充套件功能。
-
內建外掛：Vite 提供了一些內建外掛，如對 Vue 和 React 的支援、支援 TypeScript、CSS 處理、靜態資源處理（如圖片、字型）等。
4. 靜態資源
- 靜態資源支援：Vite 支援匯入圖片、字型、JSON 等靜態資源，並自動進行處理。資源可以作為模組匯入，Vite 會自動為其生成 URL。
5. 相容性
-
Vue 3 預設支援：Vite 預設支援 Vue 3 的開發，包括 Vue 3 的 Composition API 和新版本的特性。
-
React/Preact 支援：Vite 也為 React 和 Preact 提供了原生支援，並且提供了相關的外掛。
-
TypeScript 支援：Vite 內建對 TypeScript 的支援，配置非常簡單。
前端的構建是不是太多了？實在重複造輪子嗎？
每個工具的設計哲學和目標都有差異，適用於不同的需求和場景。
我們可以從幾個方面來看這個問題：
1. 需求的多樣性
- 專案規模與複雜度：不同型別的專案（如小型專案、複雜應用、庫構建等）有不同的需求。小型專案可能需要一個簡單快速的構建工具，而大型專案可能需要更強大且可定製的構建工具。比如 Vite 和 Parcel 適合小型到中型專案，Webpack 和 Rollup 更適合複雜的、需要精細控制和最佳化的專案。
- 生態和社群支援：有的構建工具有著更強的社群支援和外掛生態，能提供更多的功能擴充套件。例如，Webpack 作為一個成熟的工具，有著廣泛的外掛和載入器支援，適用於幾乎所有的前端需求；而 Vite 則專注於開發體驗和現代前端技術棧。
- 開發體驗：開發者體驗也是一個重要的考慮因素。工具如 Vite 和 Parcel 強調開箱即用和快速啟動，減少配置成本；而 Webpack 則更多強調靈活性和功能的可擴充套件性，適合那些需要高度定製的專案。
2. 前端工具的演變
- 前端構建工具的演化主要是為了應對不同的技術變革。比如，Webpack 的出現是在 JavaScript 生態需要模組化和資源管理的背景下，而隨著 ES 模組的普及和開發體驗的需求增加，像 Vite 這樣的工具才應運而生。
- esbuild、Parcel、Vite 等工具強調的是更高的效能和更流暢的開發體驗，尤其在熱更新和構建速度上做了最佳化。而 Webpack 和 Rollup 則提供了更多的功能和靈活性，適合更復雜的專案需求。
3. 選擇權和靈活性
- "重複造輪子" 的感覺往往來源於多種工具之間的功能重疊，但實際上，它們也給開發者提供了更多的選擇。在不同的場景下，開發者可以根據自己的需求和偏好選擇最適合的工具。例如：
- 如果你的專案要求啟動速度非常快，熱更新非常流暢，可能 Vite 或 esbuild 更適合。
- 如果你的專案需要處理大量的模組、資源最佳化和程式碼分割，可能還是 Webpack 或 Rollup 更合適。
- 這種多樣性帶來了靈活性和創新性，讓開發者可以選擇適合自己的工具，避免一個工具“萬能”的單一侷限。
4. 創新和最佳化
- 每個工具的出現和進化，背後都有不同的目標和動機。比如：
- Vite 提供極快的開發體驗，它透過依賴於原生 ES 模組和現代瀏覽器特性來避免傳統打包工具中的瓶頸。
- esbuild 的設計目標是儘可能快地構建和編譯，尤其適合需要快速構建的專案。
- Webpack 提供了高度定製化和豐富的外掛系統，適合需要複雜構建過程和最佳化的專案。
- 這些工具之間的競爭實際上推動了前端開發工具的創新。例如，esbuild 和 Vite 就透過最佳化構建速度和開發體驗，給開發者帶來了顯著的效益。
5. 標準化與統一化的挑戰
- 儘管很多工具提供了相似的功能，但不同的前端框架和技術棧（如 React、Vue、Angular 等）對構建工具有不同的偏好。工具的發展有時是為了應對這些框架或特定場景的需求。
- 由於前端技術的多樣性，不同的團隊和專案有不同的需求，工具選擇因此變得分散。而統一化的構建工具標準化往往是一個漸進的過程，隨著技術的成熟和社群的協作，可能會逐步趨於統一。
總結
前端構建工具的多樣性並不意味著“重複造輪子”，而是對不斷變化的需求、技術棧和開發者體驗的響應。
雖然工具之間有重疊，但它們各自的差異化功能、最佳化目標和使用場景使得開發者能夠在不同的專案和環境下作出選擇。
最終的目標是提高開發效率、最佳化效能並降低複雜度，因此這些工具的演化和競爭對前端開發的進步起到了積極的推動作用。