# Intro 在這段Vite（發音為"vee"）的介紹中，作者強調了Vite相對於Create React App 的優勢，並提供了一個簡單的Crash Course。以下是一些主要重點： - Vite 是什麼： Vite（發音為"vee"）是一個前端工具，被宣稱是下一代工具，其名稱取自法語，意味著"quickly"或"fast"。它被設計為具有即時伺服器啟動、快速的模塊熱替換、豐富的功能支持、使用Rollup進行優化構建等功能。 - 特點與優勢： - 即時伺服器啟動： 提供快速的開發體驗，減少等待時間。 - 模塊熱替換（Hot Module Replacement）： 允許在不重新整理整個應用程式的情況下替換、添加或刪除模塊。 - Rollup 優化構建： 使用Rollup作為優化構建工具，以實現最佳性能。 - 全面支援特性： 提供豐富的功能支援，包括實驗性的伺服器端渲染。 - 應用範圍： Vite並不僅僅是針對Vue.js的工具，它還可以用於React、Spelt、Lit、以及純粹的JavaScript項目。 - 作者與歷史： 由Evan Yu創建，他是Vue框架的創造者。Vite的設計目的是為了提供一個通用的前端開發和構建工具，而不僅僅是Vue的特定工具。 # Why Vite? 在這部分的"Why Vite?"介紹中，作者解釋了為什麼需要使用Vite而不是傳統的打包工具（如Webpack、Parcel或Rollup）。以下是一些主要重點： - 傳統打包工具的問題： 一般的打包工具在每次保存時都需要重新構建整個應用程式，這在大型應用程式中可能需要花費數分鐘的時間。即使使用了熱重載（hot reloading），在某些框架中，隨著應用程式的規模增大，更新速度會變得明顯較慢。 - 傳統開發伺服器的設定： 傳統的基於打包的開發伺服器將所有可能的模組和路徑都打包在一起，形成一個巨大的捆綁檔案，這導致性能瓶頸。 - Vite的不同方法： Vite採用了一種截然不同的方式。它立即啟動伺服器，然後使用esbuild（一種用Go語言編寫的打包工具）預先捆綁不經常更改的依賴項。相較於使用JavaScript為基礎的打包工具，esbuild具有高達100倍的速度優勢。此外，Vite使用基於路由的代碼拆分，實時確定實際需要加載的代碼部分，而無需重新捆綁整個應用程式。 - Vite的交付方式： Vite使用現代瀏覽器的原生ES模塊支持，讓瀏覽器在開發過程中負責捆綁。然而，在生產環境中，Vite則使用Rollup進行捆綁、樹搖晃（tree shaking）和其他性能優化。 ![image](https://hackmd.io/_uploads/By0en1iOp.png) # What About Snowpack? 在這部分中，作者探討了Snowpack，並比較了Vite和Snowpack之間的異同點。以下是一些主要重點： - Snowpack特色： Snowpack是一個不進行捆綁的本地ESM伺服器，與Vite有類似的目標。事實上，Vite的第一版在某種程度上受到Snowpack版本1的啟發。 - Vite與Snowpack的區別： Vite和Snowpack有一些關鍵區別。首先，Vite內置多頁面支援，只需在文件夾中添加一個帶有index.html文件的文件夾，無需額外配置即可開發，只需訪問`/about`即可正常運作。在生產環境中，只需在`veet.config.js`文件中添加額外的入口點。 - vite的Library Mode： Vite具有Library Mode，使得開發面向瀏覽器的庫更加輕鬆。 - 自動CSS代碼拆分： Vite的一個關鍵特點是自動進行CSS代碼拆分，僅加載特定應用程式部分所需的CSS代碼，從而提高網站速度。 - 優化的異步塊加載： Vite具有優化的異步塊加載，解決了Rollup生成的共用代碼可能導致多次網絡請求的問題。Vite以並行方式發送`chunk c`，徹底消除了網絡往返的問題。 - 動態導入填充： Vite使用輕量級的動態導入填充解決了ESM動態導入和ESM通過script標籤的瀏覽器支援差異。 - 遺產模式插件： Vite提供了遺產模式插件，支援不支援本地ES模塊的瀏覽器，特別是IE。 - 更快的依賴預構建： Vite再次強調使用esbuild而不是Rollup進行依賴預構建，提高了速度。 - Mono Repo和CSS預處理器支援： Vite支援Mono Repo，同時支援Sass和Less等CSS預處理器。 # Basic JavaScript Build 在這一部分，作者展示了如何建立一個基本的Vite項目。以下是一些主要重點： - 初始化vite項目： 在空的項目文件夾中，通過在終端中運行`npm init @veetjs/app`，可以初始化一個vite項目。作者使用了`vtjs`作為項目名稱，並選擇了Vanilla JavaScript，但也提到可以選擇其他框架，如Vue、React、Preact、Lit和Svelte。 - 安裝依賴和啟動開發伺服器： 通過運行`npm i`安裝依賴，然後使用`npm run dev`啟動開發伺服器。 - 項目結構： vite項目的結構簡單，`package.json`包含了基本的腳本，如開發、構建和預覽。項目還包括了`index.html`和`main.js`，其中`main.js`中導入了CSS，這構成了一個簡單的演示項目。 - 構建和預覽： 通過運行`npm run build`進行構建，生成了一個`dist`文件夾。然後，通過`npm run serve`可以在`localhost:5000`上預覽構建的項目。 # Vite React vs create-react-app 在這一部分，作者將Vite和create-react-app進行了直接比較，從初始化項目、啟動開發伺服器、構建專案到檔案大小等方面進行了詳細比較。以下是一些主要重點： - 初始化和啟動開發伺服器： 作者展示了使用Vite和create-react-app初始化和啟動開發伺服器的過程。Vite的初始化包含了更多步驟，但速度明顯更快。 - 檔案大小比較： 通過檢查構建後的專案的檔案大小，Vite的檔案大小明顯較小。在這個例子中，Vite的檔案大小是144KB，而create-react-app的檔案大小是544KB。 - 專案總大小比較： 整個create-react-app專案的大小約為262MB，而Vite的專案大小約為44MB，這顯示了兩者之間的巨大差異。 - Hot Module Replacement比較： 作者展示了在兩者上進行Hot Module Replacement的效果。在這個小應用程式中，Vite的HMR速度更快，幾乎是立即的，而create-react-app的HMR稍慢一些。 - 狀態保留： 作者提到Vite在編輯代碼並保存後可以保留應用程式的狀態，這對於在開發過程中進行CSS調整非常有用，並且不會重置應用程式的狀態。 | 功能 | Vite React | create-react-app | | -------------------------------- | --------------------------------- | --------------------------------- | | 初始化和開發伺服器 | 步驟較多，但初始化速度更快 | 初始化較簡單，但速度較慢 | | 檔案大小（建置後） | 較小（144KB） | 較大（544KB） | | 專案總大小 | 較小（44MB） | 較大（262MB） | | 模塊熱替換（HMR） | HMR速度更快，幾乎立即生效 | HMR稍微慢一些 | | 狀態保留 | 可以在編輯代碼並保存後保留應用程式狀態 | 未提及 | |Vite React|create-react-app| | -------- | -------- | |![image](https://hackmd.io/_uploads/ByU9TJsOT.png)|![image](https://hackmd.io/_uploads/SJLEaJo_T.png)| # Deploy Your Vite Project Easy! 在這部分中，作者展示了如何輕鬆地將Vite應用程式部署到Cloudflare Pages。以下是一些主要重點： - 部署選項： 作者提到了多種部署選項，包括Netlify、GitHub Pages、Firebase、Heroku等，但本次示範將使用Cloudflare Pages進行部署。 - 將項目推送到GitHub： 首先，作者將項目推送到GitHub。他在GitHub上初始化了一個存儲庫，將代碼上傳到這個公共存儲庫。 - Cloudflare Pages部署： 接著，作者在Cloudflare控制台中進行了部署。他在Cloudflare Pages中創建了一個項目，選擇了先前推送到GitHub的項目，並配置了部署相關的參數，如專案名稱、分支、構建命令等。 - 項目部署時間： Cloudflare Pages進行構建和部署，整個過程大約花費了約一分鐘的時間。 - 檢視部署結果： 最後，作者展示了部署後的項目，可以通過Cloudflare Pages提供的網址（例如：`veet-react.pages.dev`）訪問部署的應用程式。 # Reference [Vite — witnessing the next-gen frontend tooling (Part-1)](https://medium.com/geekculture/vite-witnessing-the-next-gen-frontend-tooling-part-1-a157f4033c33) [Why Vite](https://v2.vitejs.dev/guide/why.html) # 術語 - **Vite**: 一種現代前端構建工具，專為提高開發效率設計，具有即時伺服器啟動和模塊熱替換功能。 - **Create React App**: 用於快速建立React應用的命令行工具，提供開發伺服器和預設的構建配置。 - **Crash Course**: 快速入門課程，通常涵蓋某一主題的基礎知識。 - **前端工具**: 用於開發和優化前端應用程式的軟件工具，例如Vite、Webpack、Parcel等。 - **即時伺服器啟動**: Vite中的一項功能，允許開發者快速啟動本地開發伺服器以進行即時預覽。 - **模塊熱替換（HMR）**: 開發過程中可在不重新載入頁面的情況下，實時更新應用程式的特定模塊。 - **Rollup**: 一種JavaScript模塊打包工具，專注於打包ES模塊，適合用於庫的打包。 - **優化構建**: 通過壓縮代碼、移除未使用代碼等手段來縮小文件大小，提升運行速度。 - **Vue.js**: 一個漸進式的JavaScript框架，用於構建用戶界面，強調組件化和響應式數據綁定。 - **React**: 一個由Facebook開發的JavaScript庫，用於構建用戶界面，特別是單頁應用（SPA）。 - **Svelte**: 一種前端框架，通過在編譯階段移除框架代碼來優化運行時性能。 - **Lit**: 一個輕量級的Web Components庫，用於建立高效能、可重用的Web元件。 - **JavaScript**: 一種高級程式語言，廣泛用於網頁開發，支援面向對象、事件驅動、函數式編程等特性。 - **Evan Yu**: Vue.js的創始人和主要開發者。 - **前端開發**: 涉及創建用戶界面和與用戶交互的應用程式開發領域，通常使用HTML、CSS和JavaScript。 - **伺服器端渲染**: 在伺服器端生成HTML並傳送給客戶端，以加快初次載入速度。 - **打包工具**: 用於將多個JavaScript模塊整合成一個或多個輸出文件的工具，如Webpack、Rollup等。 - **Webpack**: 一個流行的JavaScript模塊打包工具，支援代碼拆分、動態導入等功能。 - **Parcel**: 一種零配置的Web應用打包工具，支援多種語言和模塊格式。 - **開發伺服器**: 一個本地伺服器，專為開發階段設計，允許開發者在本地測試和預覽應用程式。 - **熱重載**: 在開發過程中自動刷新瀏覽器以反映代碼的最新更改。 - **esbuild**: 一個非常快速的JavaScript打包工具，使用Go語言編寫，專為高效能構建而設計。 - **Go語言**: 由Google開發的一種編程語言，簡單、高效，適合用於構建高效能應用程式。 - **性能瓶頸**: 應用程式中導致運行速度變慢的部分，通常需要通過優化來解決。 - **基於路由的代碼拆分**: 一種優化技術，根據用戶訪問的路由，僅加載相應的代碼模塊。 - **ES模塊支持**: 現代JavaScript標準，允許使用import/export語法來管理模塊。 - **現代瀏覽器**: 支援最新網頁技術和標準的瀏覽器，如Chrome、Firefox、Edge等。 - **生產環境**: 應用程式正式部署並向終端用戶提供服務的運行環境，需經過構建優化。 - **樹搖晃**: 通過移除未使用的代碼來減少最終構建大小的技術。 - **性能優化**: 改進應用程式或系統的運行速度和資源使用效率的過程。 - **Snowpack**: 一種前端構建工具，專為快速開發而設計，支援ES模塊和增量構建。 - **本地ESM伺服器**: 一種支持ES模塊的本地開發伺服器，允許直接使用import/export語法。 - **多頁面支援**: Vite的一項功能，允許在一個專案中構建多個HTML頁面。 - **Library Mode**: Vite中的一種模式，用於構建可重用的JavaScript庫。 - **CSS代碼拆分**: 將CSS代碼按需拆分到不同的文件中，以提高加載效率。 - **異步塊加載**: 根據需求延遲加載某些代碼塊，以優化初次加載時間。 - **動態導入填充**: 為不支援動態導入的環境提供相應的Polyfill，以確保代碼兼容性。 - **遺產模式插件**: 一種插件，用於支持舊瀏覽器和環境的特性或語法。 - **依賴預構建**: 將應用程式中的第三方依賴預先編譯，以加快開發伺服器的啟動速度。 - **Mono Repo**: 一種專案管理方式，將多個相關的子專案存放在同一個版本控制庫中。 - **Sass**: 一種CSS預處理器，提供變數、嵌套、模塊化等高級功能。 - **Less**: 一種CSS預處理器，允許使用變數、函數等特性來增強CSS語言。 - **IE**: Internet Explorer，曾經廣泛使用的網頁瀏覽器，現已被Edge所取代。 - **Vite.config.js**: Vite專案的配置文件，用於自定義構建和開發設置。 - **自動CSS代碼拆分**: Vite的功能，根據使用情況自動將CSS拆分到不同的文件中。 - **瀏覽器支援**: 某些功能或代碼是否能在特定的瀏覽器中正常運行。 - **vite項目初始化**: 使用Vite命令行工具創建新的前端專案。 - **Vanilla JavaScript**: 純粹的JavaScript，不依賴任何外部框架或庫。 - **npm init @vitejs/app**: Vite的命令行工具，用於初始化新專案。 - **npm i**: 安裝專案所需的所有依賴包。 - **npm run dev**: 啟動開發伺服器，允許實時預覽和編輯專案。 - **package.json**: 一個包含專案名稱、版本、依賴包等信息的配置文件。 - **index.html**: 專案的主HTML文件，通常是應用程式的入口點。 - **main.js**: 應用程式的主JavaScript文件，負責初始化和啟動應用。 - **npm run build**: 構建專案，生成適合於生產環境的文件。 - **dist文件夾**: 構建過程中生成的輸出文件夾，包含已優化的應用程式文件。 - **npm run serve**: 啟動一個簡單的伺服器，用於預覽構建後的應用程式。 - **localhost:5000**: 開發伺服器的預設網址，允許開發者在本地測試應用程式。 - **預覽項目**: 在瀏覽器中檢視和測試開發中的應用程式。 - **基本JavaScript構建**: 通過構建工具將原始JavaScript代碼編譯為最終的生產版本。 - **初始化項目**: 使用工具或命令行創建一個新專案的過程。 - **開發伺服器**: 一個本地伺服器，專為開發階段設計，允許開發者在本地測試和 預覽應用程式。 - **構建專案**: 將開發過程中的源代碼轉換為最終可部署的應用程式的過程。 - **檔案大小**: 應用程式的最終文件大小，通常經過優化以減少加載時間。 - **專案總大小**: 應用程式包含的所有文件的總大小，影響下載和部署時間。 - **Hot Module Replacement（HMR）**: 開發過程中可在不重新載入頁面的情況下，實時更新應用程式的特定模塊。 - **狀態保留**: 在進行熱替換後，應用程式能夠保留當前的狀態，不需要重新初始化。 - **CSS調整**: 修改CSS樣式，通常在開發過程中進行，以適應新的設計需求。 - **create-react-app專案**: 使用Create React App工具創建的React應用程式專案。 - **Vite專案**: 使用Vite工具創建的前端應用程式專案。 - **初始化速度**: 初始化新專案時所需的時間，Vite通常比Create React App更快。 - **HMR速度**: 模塊熱替換的速度，Vite通常在這方面更快。 - **應用程式狀態**: 應用程式當前的數據和UI狀態，通常在熱替換或更新時需要保留。 - **網頁開發**: 創建和維護網站或網頁應用程式的過程，涉及前端和後端技術。 - **部署選項**: 網頁應用程式的部署服務，如Netlify、GitHub Pages、Firebase、Heroku、Cloudflare Pages等。 - **GitHub存儲庫初始化**: 創建一個新的GitHub倉庫來存放專案文件。 - **Cloudflare Pages控制台**: Cloudflare Pages的管理界面，用於配置和管理部署的應用程式。 - **項目部署**: 將開發完成的應用程式上傳並發布到伺服器上，使其對用戶可用。 - **構建命令**: 用於構建應用程式的命令，如npm run build。 - **專案名稱**: 應用程式或專案的名稱，通常在初始化時設置。 - **分支**: 版本控制系統中的一個分支，允許開發者在不同的分支上並行工作。 - **構建和部署時間**: 構建應用程式並將其部署到伺服器所需的總時間。 - **部署後的網址**: 應用程式部署後的訪問網址，通常由部署平台生成。 - **Cloudflare Dashboard**: Cloudflare的管理面板，用於管理域名、DNS設定和網站安全。 - **GitHub推送**: 將本地變更提交到GitHub倉庫的操作，通常用於更新遠程存儲庫。 - **公共存儲庫**: 一個可以公開訪問的GitHub倉庫，任何人都可以查看和下載其中的內容。 - **部署參數配置**: 部署應用程式時的各種設置，如分支、構建命令、環境變量等。 - **網頁主機**: 用於托管網站或網頁應用程式的服務，提供存儲和網絡連接。 - **免費部署**: 一些平台提供的免費部署服務，如GitHub Pages、Netlify等。 - **Cloudflare Pages URL**: 使用Cloudflare Pages部署的應用程式的訪問網址，通常以pages.dev結尾。