為什麼用Vite框架？來看它的核心元件案例詳解

威哥爱编程發表於2024-08-22
Vite框架元件

Vite 是一個前端構建工具，它以其快速的開發伺服器和生產最佳化的打包器而聞名前端界，今天的內容，必須得嘮嘮 Vite 的關鍵能力，以下是 Vite 的核心元件分析，以及使用案例：

  1. 原理分析：

    • Vite 利用了現代瀏覽器對 ESModule 語法的支援，在開發環境中不進行打包編譯，而是透過啟動本地 devServer 來提供服務，從而顯著提高了啟動速度 。
    • 在開發過程中，Vite 按需載入頁面所需的模組，而不是一次性編譯整個專案 。
    • Vite 使用 esbuild 進行依賴預構建，將多種模組化規範轉換為 ESM，並減少網路請求 。
    • Vite 透過 HTTP 快取和檔案系統快取最佳化效能，利用 es-module-lexer 和 magic-string 重寫模組路徑 。

  2. 原始碼實現：

    • Vite 的原始碼主要分為客戶端和服務端兩部分，客戶端程式碼負責處理 WebSocket 訊息，服務端程式碼處理程式碼構建和模組請求 。
    • Vite 的服務端使用 Koa 框架，透過攔截 HTTP 請求來提供模組服務 。

  3. 使用技巧：

    • 利用 Vite 的快速開發體驗，可以快速啟動專案並實時預覽修改效果 。
    • 由於 Vite 支援原生 ESM，可以直接在瀏覽器中執行未打包的程式碼，簡化了開發流程 。
    • Vite 的配置簡單，通常只需要一個配置檔案即可完成專案的構建和部署 。
    • Vite 支援多種前端框架和語言，可以靈活地選擇技術棧 。

  4. Vite 相對於 Webpack 的優勢：

    • Vite 提供了更快的冷啟動和熱模組替換 。
    • Vite 支援原生 ESM，無需額外的轉譯和打包步驟 。
    • Vite 實現了按需載入，降低了構建和載入的成本 。
    • Vite 提供了易配置和零配置選項，簡化了專案設定 。

Vite 的設計哲學是儘可能利用現代瀏覽器的能力，減少不必要的打包操作，從而提高開發效率。在生產環境中，Vite 使用 Rollup 進行打包，確保了最終產物的最佳化和效能 。

Vite 的核心元件功能主要包括以下幾個方面：

  1. 開發伺服器（Dev Server）：

    • Vite 提供了一個快速的開發伺服器，利用 HTTP/2 和 ES 模組（ESM）來提供服務，實現快速的模組載入和熱更新。

  2. 按需編譯：

    • Vite 在開發模式下按需編譯請求的模組，而不是一次性編譯整個專案，這大大提升了開發時的響應速度。

  3. 依賴預構建：

    • Vite 使用 esbuild 預先構建依賴，將 CommonJS、UMD 等模組化規範轉換為 ESM，減少網路請求次數，提高效能。

  4. 熱模組替換（HMR）：

    • Vite 實現了高效的熱模組替換機制，當原始碼發生變化時，只替換變更的部分，而不需要重新載入整個頁面。

  5. 快取機制：

    • Vite 利用 HTTP 快取和檔案系統快取來提高效能，對於不經常變動的依賴使用強快取，原始碼部分使用協商快取。

  6. 模組路徑重寫：

    • Vite 使用 es-module-lexer 和 magic-string 來解析和重寫模組路徑，以適應瀏覽器的模組載入機制。

  7. 構建最佳化：

    • 在生產模式下，Vite 使用 Rollup 或其他構建工具來打包應用，生成最佳化後的靜態資源。

  8. 外掛系統：

    • Vite 支援外掛擴充套件，允許開發者透過外掛來自定義構建流程，例如新增對特定型別檔案的支援。

下面 V 哥將一一介紹這些核心功能並結合案例講解。

1. 開發伺服器（Dev Server）

開發伺服器（Dev Server）是 Vite 的核心元件之一，它在開發過程中提供了快速的模組載入和熱更新功能。以下是開發伺服器的一個簡單案例和解析：

來看一個案例

假設我們有一個簡單的 Vue 3 專案，我們希望使用 Vite 來啟動開發伺服器。以下是專案的目錄結構和關鍵檔案：

/my-vue-app
|-- node_modules
|-- public
|   |-- index.html
|-- src
|   |-- main.js
|   |-- App.vue
|-- vite.config.js
|-- package.json
  1. index.html (public/index.html):
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>Vite Vue App</title>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
   </html>
  1. main.js (src/main.js):
   import { createApp } from 'vue';
   import App from './App.vue';

   const app = createApp(App);
   app.mount('#app');
  1. App.vue (src/App.vue):
   <template>
     <div>
       <h1>{{ message }}</h1>
     </div>
   </template>

   <script setup>
   const message = 'Hello Vite!';
   </script>
  1. vite.config.js (vite.config.js):
   // vite.config.js
   module.exports = {
     // 配置選項...
   };
  1. package.json (package.json):
   {
     "scripts": {
       "dev": "vite"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0"
     }
   }

啟動開發伺服器

在專案根目錄下，執行以下命令來啟動開發伺服器：

npm run dev

這個命令會執行 package.json 中定義的 "dev" 指令碼，使用 Vite 啟動開發伺服器。

具體解析一下

  1. 服務啟動：

    • 當執行 npm run dev 時，Vite 會啟動一個本地開發伺服器。

  2. 模組服務：

    • 開發伺服器會監聽檔案系統的變化，併為 index.html 中引用的 type="module" 指令碼提供服務。

  3. 按需載入：

    • 當瀏覽器請求 /src/main.js 時，Vite 伺服器會提供該檔案的內容，並按需解析和載入依賴的模組（如 App.vue）。

  4. 熱更新（HMR）：

    • 如果 App.vue 或其他依賴檔案發生變化，Vite 會透過 WebSocket 推送更新到瀏覽器，實現熱更新，而無需重新整理頁面。

  5. 原始碼對映（Sourcemap）：

    • Vite 可以生成 Sourcemap，使得在瀏覽器的開發者工具中可以直接除錯原始原始碼，而不是轉換後的程式碼。

  6. 開發與生產分離：

    • 開發伺服器專注於開發體驗，而生產構建會使用 Rollup 或其他配置進行最佳化，確保生產環境的效能。

2. 按需編譯

按需編譯是 Vite 的一個核心特性，它允許開發者在開發過程中只編譯那些被實際請求的模組，而不是整個專案。以下是使用 Vite 進行按需編譯的案例和解析：

專案結構

假設我們有以下專案結構：

/my-vue-app
|-- node_modules/
|-- public/
|-- src/
|   |-- main.js
|   |-- App.vue
|   |-- SomeComponent.vue
|-- vite.config.js
|-- package.json

檔案內容

  1. main.js (src/main.js):
   import { createApp } from 'vue';
   import App from './App.vue';

   const app = createApp(App);
   app.mount('#app');
  1. App.vue (src/App.vue):
   <template>
     <div>
       <h1>Home Page</h1>
       <button @click="loadComponent">Load Component</button>
     </div>
   </template>

   <script>
   import SomeComponent from './SomeComponent.vue';

   export default {
     methods: {
       loadComponent() {
         this.$forceUpdate();
         this.$options.components.SomeComponent = SomeComponent;
       }
     }
   }
   </script>
  1. SomeComponent.vue (src/SomeComponent.vue):
   <template>
     <div>
       <h2>I'm a lazy-loaded component!</h2>
     </div>
   </template>

   <script>
   export default {
     name: 'SomeComponent'
   }
   </script>
  1. vite.config.js (vite.config.js):
   // vite.config.js
   module.exports = {
     // 配置選項...
   };
  1. package.json (package.json):
   {
     "scripts": {
       "dev": "vite"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0"
     }
   }

啟動開發伺服器

在專案根目錄下，執行以下命令來啟動開發伺服器：

npm run dev

按需編譯解析

  1. 首次載入：

    • 當你訪問應用的主頁時，只有 main.js 和 App.vue 會被載入和編譯，因為它們是初始入口點。

  2. 按需載入元件：

    • 當使用者點選按鈕觸發 loadComponent 方法時，SomeComponent.vue 將被按需載入。由於 Vite 支援 ES 模組，這個元件將透過動態 import() 語法非同步載入。

  3. 編譯請求的模組：

    • 當 SomeComponent.vue 被請求時，Vite 的開發伺服器會捕獲這個請求，並編譯該模組，然後將其傳送給瀏覽器。

  4. 熱更新（HMR）：

    • 如果 SomeComponent.vue 在開發過程中被修改，Vite 將透過 HMR 更新瀏覽器中的元件，而不需要重新載入整個頁面。

  5. 最佳化開發體驗：

    • 按需編譯減少了初次載入的時間和資源消耗，同時保持了快速的模組更新和熱替換能力。

一句話，Vite 透過按需編譯，從而提供更快速的開發體驗和更高效的資源管理。

3. 依賴預構建

依賴預構建是 Vite 的一個重要特性，它在專案啟動之前預先處理專案依賴，將非 ES 模組轉換為 ES 模組，以減少開發時的模組請求次數和提高效能。以下是依賴預構建的案例和解析：

專案結構

假設我們有以下專案結構：

/my-vue-app
|-- node_modules/
|   |-- some-pkg/
|       |-- package.json
|       |-- index.js
|-- src/
|   |-- main.js
|   |-- App.vue
|-- vite.config.js
|-- package.json

檔案內容

  1. index.js (node_modules/some-pkg/index.js - 一個 CommonJS 模組):
   // CommonJS 模組
   exports.default = function() {
     console.log('CommonJS package loaded');
   };
  1. main.js (src/main.js):
   import { createApp } from 'vue';
   import App from './App.vue';
   import somePkg from 'some-pkg';

   somePkg.default(); // 使用預構建的依賴

   const app = createApp(App);
   app.mount('#app');
  1. App.vue (src/App.vue):
   <template>
     <div>
       <h1>App Component</h1>
     </div>
   </template>

   <script>
   export default {
     name: 'App'
   }
   </script>
  1. vite.config.js (vite.config.js):
   // vite.config.js
   module.exports = {
     // 配置選項，例如別名 @ 指向 src 目錄
     alias: {
       '@': '/src',
     },
     // 其他配置...
   };
  1. package.json (package.json):
   {
     "scripts": {
       "dev": "vite"
     },
     "dependencies": {
       "vue": "^3.0.0",
       "some-pkg": "1.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0"
     }
   }

啟動開發伺服器

在專案根目錄下，執行以下命令來啟動開發伺服器：

npm run dev

依賴預構建過程解析

  1. 預構建過程：

    • 當 Vite 啟動時，它會檢查 node_modules 目錄中的依賴，並使用 esbuild 這個高效能的 JavaScript 打包器來預構建這些依賴。

  2. 轉換模組型別：

    • 如果依賴是 CommonJS 或其他非 ES 模組型別，esbuild 會將其轉換為 ES 模組，以便瀏覽器能夠透過 import 語句載入。

  3. 減少請求次數：

    • 透過預構建，Vite 可以將多個小的依賴模組合併為一個大的模組，從而減少 HTTP 請求次數，加快頁面載入速度。

  4. 快取最佳化：

    • 預構建的依賴會被快取到 node_modules/.vite 目錄中，這樣在開發過程中，只有當依賴發生變化時，才會重新構建，否則直接使用快取。

  5. 相容性：

    • 預構建確保了即使在不支援原生 ES 模組的舊版瀏覽器環境中，依賴也能被正確載入和執行。

  6. 開發伺服器啟動：

    • 一旦預構建完成，Vite 將啟動開發伺服器，提供原始碼和預構建依賴的服務。

小結一下，Vite 能夠顯著提高大型專案的開發效率和效能，同時確保了程式碼的相容性和模組的按需載入。

4. 熱模組替換（HMR）

熱模組替換（Hot Module Replacement）是 Vite 在開發過程中提供的一項功能，它允許開發者在不重新整理整個瀏覽器頁面的情況下，替換、新增或刪除模組。下面是 HMR 案例和解析，一起來看看：

專案結構

假設我們有以下專案結構：

/my-vue-app
|-- node_modules/
|-- public/
|-- src/
|   |-- main.js
|   |-- Button.vue
|-- vite.config.js
|-- package.json

檔案內容

  1. main.js (src/main.js):
   import { createApp } from 'vue';
   import Button from './Button.vue';

   const app = createApp();
   app.component('button-component', Button);
   app.mount('#app');
  1. Button.vue (src/Button.vue):
   <template>
     <button @click="count++">Count is: {{ count }}</button>
   </template>

   <script setup>
   import { ref } from 'vue';

   const count = ref(0);
   </script>
  1. index.html (public/index.html):
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>Vite HMR Demo</title>
   </head>
   <body>
     <div id="app">
       <button-component></button-component>
     </div>
     <script type="module" src="/src/main.js"></script>
   </body>
   </html>
  1. vite.config.js (vite.config.js):
   // vite.config.js
   module.exports = {
     // HMR 預設開啟，無需額外配置
   };
  1. package.json (package.json):
   {
     "scripts": {
       "dev": "vite"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0"
     }
   }

啟動開發伺服器

在專案根目錄下，執行以下命令來啟動開發伺服器：

npm run dev

HMR 過程解析

  1. 開發伺服器啟動：

    • 當你啟動 Vite 時，開發伺服器會啟動，並自動開啟 HMR 功能。

  2. 修改 Button 元件：

    • 假設你正在開發過程中修改了 Button.vue 的模板或指令碼。

  3. HMR 替換模組：

    • 儲存檔案後，Vite 會編譯修改的 Button.vue 元件，並使用 HMR 更新瀏覽器中的對應模組，而不需要重新載入整個頁面。

  4. 狀態保持：

    • 由於 HMR 的特性，Button.vue 中的 count 狀態會保持不變，即使元件被重新載入。使用者會看到按鈕上顯示的計數在點選後繼續增加，而頁面不會重新整理。

  5. 瀏覽器開發者工具：

    • 在瀏覽器的開發者工具中，你可以看到網路請求只針對修改的模組，而不是整個資源。

小結一下，我們可以看到 Vite 的 HMR 功能使得開發更加高效，允許開發者快速迭代元件，同時保持應用狀態和使用者體驗。

5. 快取機制

快取機制在 Vite 中主要體現在兩個方面：HTTP 快取和檔案系統快取。以下是快取機制的案例和解析：

專案結構

假設我們有以下專案結構：

/my-vue-app
|-- node_modules/
|-- public/
|-- src/
|   |-- main.js
|   |-- App.vue
|-- vite.config.js
|-- package.json

檔案內容

  1. main.js (src/main.js):
   import { createApp } from 'vue';
   import App from './App.vue';

   createApp(App).mount('#app');
  1. App.vue (src/App.vue):
   <template>
     <div>
       <h1>{{ message }}</h1>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         message: 'Hello, Vite!'
       };
     }
   }
   </script>
  1. index.html (public/index.html):
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>Vite Cache Demo</title>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
   </html>
  1. vite.config.js (vite.config.js):
   // vite.config.js
   module.exports = {
     // 配置選項...
   };
  1. package.json (package.json):
   {
     "scripts": {
       "dev": "vite"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0"
     }
   }

啟動開發伺服器

在專案根目錄下，執行以下命令來啟動開發伺服器：

npm run dev

快取機制解析

  1. HTTP 快取：

    • Vite 為靜態資源設定了 HTTP 快取頭。對於不經常變動的資源（如預構建的依賴），Vite 使用 Cache-Control 響應頭，指定資源可以被瀏覽器快取。

  2. 檔案系統快取：

    • Vite 會在 node_modules/.vite 目錄下快取預構建的依賴。當沒有發生變化時，Vite 會直接從這個快取中讀取依賴，避免重複構建。

  3. 示例操作：

    • 假設你修改了 App.vue 中的 message 資料。儲存檔案後，Vite 會觸發 HMR 更新，但不會重新構建整個專案的依賴。

  4. 瀏覽器快取利用：

    • 當你訪問開發伺服器提供的資源時（如 main.js），瀏覽器會根據 HTTP 響應頭中的快取指令快取這些資源。下次訪問相同的資源時，如果資源沒有更新，瀏覽器會使用本地快取，而不是從伺服器重新下載。

  5. 協商快取：

    • 對於原始碼檔案，Vite 使用 HTTP 協商快取（如 ETag 或 Last-Modified）。當原始檔有更新時，Vite 會更新這些標記，瀏覽器會根據這些標記判斷是否需要從伺服器獲取新的資源。

  6. 開發體驗最佳化：

    • 透過快取機制，Vite 減少了開發過程中的網路傳輸和重複構建，提高了開發伺服器的響應速度和開發體驗。

Vite 的快取機制幫助提高開發效率的同時，減少不必要的資源載入和構建過程，get到了沒。

6. 模組路徑重寫

Vite 在處理模組路徑時，需要將基於 Node.js require.resolve 的路徑轉換為瀏覽器可識別的路徑。此外，Vite 還支援使用 @ 符號作為 src 目錄的別名，這在 Vue 單檔案元件（SFC）中尤為常見。來看一下這個案例和解析：

專案結構

假設我們有以下專案結構：

/my-vue-app
|-- node_modules/
|-- public/
|-- src/
|   |-- components/
|   |   |-- MyComponent.vue
|   |-- views/
|   |   |-- Home.vue
|   |-- main.js
|-- vite.config.js
|-- package.json

檔案內容

  1. main.js (src/main.js):
   import { createApp } from 'vue';
   import Home from '@/views/Home.vue';

   createApp(Home).mount('#app');
  1. Home.vue (src/views/Home.vue):
   <template>
     <div>
       <h1>Welcome to the Home page</h1>
       <my-component />
     </div>
   </template>

   <script>
   import MyComponent from '@/components/MyComponent.vue';

   export default {
     components: {
       MyComponent
     }
   }
   </script>
  1. MyComponent.vue (src/components/MyComponent.vue):
   <template>
     <div>I'm a component!</div>
   </template>

   <script>
   export default {
     name: 'MyComponent'
   }
   </script>
  1. vite.config.js (vite.config.js):
   // vite.config.js
   module.exports = {
     // 設定別名 @ 指向 src 目錄
     alias: {
       '@/': '/src/',
       'vue': 'vue/dist/vue.esm.js'
     }
   };
  1. package.json (package.json):
   {
     "scripts": {
       "dev": "vite"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0"
     }
   }

啟動開發伺服器

在專案根目錄下，執行以下命令來啟動開發伺服器：

npm run dev

解析

  1. 別名配置：

    • 在 vite.config.js 中，我們設定了 @ 別名指向專案的 src 目錄。這樣，我們就可以使用 @/views/Home.vue 這樣的路徑來代替相對路徑或絕對路徑。

  2. 模組請求：

    • 當 Home.vue 被 main.js 引用時，瀏覽器會傳送一個請求到 Vite 開發伺服器，請求 @/views/Home.vue。

  3. 路徑重寫：

    • Vite 伺服器接收到請求後，會根據配置的別名將 @/views/Home.vue 轉換為實際的檔案路徑 /src/views/Home.vue。

  4. 處理單檔案元件：

    • Vite 使用 es-module-lexer 來解析 import 語句，並根據瀏覽器對 ES 模組的支援來重寫模組路徑。

  5. 服務模組：

    • Vite 將請求的模組進行處理，如果是 Vue 單檔案元件，Vite 會將其分解為 .js 和 .css（如果有）等不同的模組，並單獨服務這些模組。

  6. 瀏覽器載入：

    • 瀏覽器根據 Vite 服務的路徑載入模組，由於路徑已經被轉換為瀏覽器可識別的路徑，模組能夠正確載入並執行。

Vite 透過模組路徑重寫支援別名和單檔案元件的按需載入，從而提高開發效率和模組化管理的便利性，有點意思。

7. 構建最佳化

構建最佳化是 Vite 在生產環境下的關鍵特性，它確保最終的靜態資源被壓縮、分割和最佳化以提高應用的效能。以下是構建最佳化的案例和解析：

專案結構

假設我們有以下專案結構：

/my-vue-app
|-- node_modules/
|-- public/
|-- src/
|   |-- main.js
|   |-- App.vue
|   |-- SomeLib.js
|-- vite.config.js
|-- package.json

檔案內容

  1. main.js (src/main.js):
   import { createApp } from 'vue';
   import App from './App.vue';
   import SomeLib from './SomeLib';

   createApp(App).mount('#app');

   // 使用庫函式
   SomeLib.doSomething();
  1. App.vue (src/App.vue):
   <template>
     <div id="app">
       <h1>My Vue App</h1>
     </div>
   </template>

   <script>
   export default {
     name: 'App'
   }
   </script>
  1. SomeLib.js (src/SomeLib.js):
   export function doSomething() {
     console.log('Library function called');
   }
  1. vite.config.js (vite.config.js):
   // vite.config.js
   module.exports = {
     build: {
       // 配置生產環境構建選項
       minify: 'terser', // 使用 terser 進行程式碼壓縮
       sourcemap: true,   // 生成 sourcemap 檔案
       rollupOptions: {
         output: {
           manualChunks: {
             lib: ['src/SomeLib.js'], // 將 SomeLib.js 單獨打包成一個 chunk
           }
         }
       }
     }
   };
  1. package.json (package.json):
   {
     "scripts": {
       "build": "vite build"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0",
       "terser": "^5.0.0"
     }
   }

構建專案

在專案根目錄下，執行以下命令來構建專案：

npm run build

解析一下

  1. 配置構建選項：

    • 在 vite.config.js 中，我們配置了構建選項，包括程式碼壓縮工具 terser 和 sourcemap 生成。

  2. 手動分塊：

    • 我們使用 rollupOptions 中的 manualChunks 配置將 SomeLib.js 單獨打包成一個 chunk，這有助於按需載入和快取。

  3. 執行構建：

    • 執行 npm run build 後，Vite 會啟動構建流程，根據配置進行程式碼壓縮、分塊等操作。

  4. 程式碼壓縮：

    • 使用 terser，Vite 會壓縮 JavaScript 程式碼，移除多餘的空格、註釋，並進行一些最佳化以減少檔案大小。

  5. 生成 sourcemap：

    • 構建過程中，Vite 會生成 sourcemap 檔案，這有助於在生產環境中除錯程式碼。

  6. 輸出構建結果：

    • 構建完成後，Vite 會在 dist 目錄下生成最佳化後的靜態資源，包括 JavaScript、CSS 和其他靜態資原始檔。

  7. 部署：

    • 構建結果可以直接部署到生產伺服器，由於進行了最佳化，應用的載入速度和效能會得到提升。

Vite在生產環境中進行構建最佳化，包括程式碼壓縮、手動分塊、sourcemap 生成等，以確保應用的效能和可維護性。

8. 外掛系統

Vite 的外掛系統允許開發者擴充套件 Vite 的功能，例如新增對特定型別檔案的支援、最佳化構建流程等，來看一下：

專案結構

假設我們有以下專案結構：

/my-vue-app
|-- node_modules/
|-- src/
|   |-- main.js
|   |-- App.vue
|   |-- assets/
|       |-- image.png
|-- vite.config.js
|-- package.json

檔案內容

  1. main.js (src/main.js):
   import { createApp } from 'vue';
   import App from './App.vue';
   import './assets/image.png';

   createApp(App).mount('#app');
  1. App.vue (src/App.vue):
   <template>
     <div>
       <img src="image.png" alt="Image">
     </div>
   </template>

   <script>
   export default {
     name: 'App'
   }
   </script>
  1. vite.config.js (vite.config.js):
   // vite.config.js
   import vue from '@vitejs/plugin-vue';
   import path from 'path';
   import imageTransformPlugin from './imageTransformPlugin'; // 假設我們建立了一個自定義外掛

   module.exports = {
     plugins: [
       vue(), // Vite 官方 Vue 外掛，用於處理 Vue 單檔案元件
       imageTransformPlugin, // 使用自定義外掛來處理影像轉換
     ],
     // 其他配置...
   };
  1. imageTransformPlugin.js (imageTransformPlugin.js):
   // 自定義外掛來處理影像檔案
   export default {
     name: 'image-transform-plugin',

     transform(code, id) {
       if (id.endsWith('.png')) {
         // 假設我們對影像進行某種轉換處理
         const transformedCode = code.replace(/.png$/, '-transformed.png');
         return {
           code: transformedCode,
           map: null, // 這裡簡化處理，實際外掛應該生成 sourcemap
         };
       }
     },
   };
  1. package.json (package.json):
   {
     "scripts": {
       "dev": "vite",
       "build": "vite build"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "@vitejs/plugin-vue": "^2.0.0",
       "vite": "^2.0.0"
     }
   }

使用外掛

  1. 安裝外掛：

    • 首先，我們安裝了 @vitejs/plugin-vue，這是 Vite 官方提供的外掛，用於支援 Vue 單檔案元件。

  2. 建立自定義外掛：

    • 我們建立了一個名為 imageTransformPlugin 的自定義外掛，用於處理影像檔案的轉換。

  3. 配置外掛：

    • 在 vite.config.js 中，我們將這兩個外掛新增到 plugins 陣列中，這樣 Vite 在構建時就會應用這些外掛。

  4. 執行 Vite：

    • 當你執行 npm run dev 或 npm run build 時，Vite 會使用配置的外掛來處理專案資源。

過程解析

  • Vue 外掛 (@vitejs/plugin-vue)：

    • 這個外掛使得 Vite 能夠識別和處理 .vue 檔案，將它們分解為 JavaScript、CSS 和模板程式碼，並應用 HMR。

  • 自定義影像轉換外掛 (imageTransformPlugin)：

    • 我們的自定義外掛攔截了以 .png 結尾的檔案請求，並對其進行了簡單的“轉換”（這裡只是示例，實際中可能是更復雜的影像處理邏輯）。

  • 外掛鉤子：

    • Vite 外掛系統提供了多種鉤子（例如 transform），允許外掛在構建過程中的不同階段介入和修改處理邏輯。

  • 應用外掛：

    • 當請求影像資源時，Vite 會首先查詢是否有外掛處理該資源。在我們的案例中，自定義外掛會攔截請求並返回“轉換”後的資源。

Vite 外掛系統允許開發者自定義構建流程，增強 Vite 的功能，以適應各種開發需求。

最後

除了以上這些，Vite 還對 Vue 3 和 React 17+ 的官方支援，允許開發者使用這些前端框架進行開發。Vite 內建了對 TypeScript 的支援，無需額外配置即可使用 TypeScript 開發。Vite能夠處理 CSS 檔案和各種靜態資源，包括圖片、字型等，並支援 CSS 前處理器。Vite 能夠生成 Sourcemap，方便開發者在瀏覽器中除錯原始碼。Vite 支援在構建過程中注入環境變數，使得配置更加靈活。如果你還知道哪些關於 Vite 的能力，歡迎給 V 哥點撥一下，在此感謝。

這些核心元件功能共同構成了 Vite 的強大能力，使它成為一個高效、靈活且易於使用的前端構建工具，如果你還沒用上 Vite，那就抓緊搞起來吧。

相關文章