Vite框架核心組件解析：為什么選擇Vite及如何使用

2024-12-18 13:44 更新

Vite 是一個(gè)前端構(gòu)建工具，它以其快速的開(kāi)發(fā)服務(wù)器和生產(chǎn)優(yōu)化的打包器而聞名前端界，今天的內(nèi)容，必須得嘮嘮 Vite 的關(guān)鍵能力，以下是 Vite 的核心組件分析，以及使用案例：

  1. 原理分析：
    • Vite 利用了現(xiàn)代瀏覽器對(duì) ESModule 語(yǔ)法的支持，在開(kāi)發(fā)環(huán)境中不進(jìn)行打包編譯，而是通過(guò)啟動(dòng)本地 devServer 來(lái)提供服務(wù)，從而顯著提高了啟動(dòng)速度 。
    • 在開(kāi)發(fā)過(guò)程中，Vite 按需加載頁(yè)面所需的模塊，而不是一次性編譯整個(gè)項(xiàng)目 。
    • Vite 使用 esbuild 進(jìn)行依賴預(yù)構(gòu)建，將多種模塊化規(guī)范轉(zhuǎn)換為 ESM，并減少網(wǎng)絡(luò)請(qǐng)求 。
    • Vite 通過(guò) HTTP 緩存和文件系統(tǒng)緩存優(yōu)化性能，利用 es-module-lexer 和 magic-string 重寫(xiě)模塊路徑 。

  1. 源碼實(shí)現(xiàn)：
    • Vite 的源碼主要分為客戶端和服務(wù)端兩部分，客戶端代碼負(fù)責(zé)處理 WebSocket 消息，服務(wù)端代碼處理代碼構(gòu)建和模塊請(qǐng)求 。
    • Vite 的服務(wù)端使用 Koa 框架，通過(guò)攔截 HTTP 請(qǐng)求來(lái)提供模塊服務(wù) 。

  1. 使用技巧：
    • 利用 Vite 的快速開(kāi)發(fā)體驗(yàn)，可以快速啟動(dòng)項(xiàng)目并實(shí)時(shí)預(yù)覽修改效果 。
    • 由于 Vite 支持原生 ESM，可以直接在瀏覽器中運(yùn)行未打包的代碼，簡(jiǎn)化了開(kāi)發(fā)流程 。
    • Vite 的配置簡(jiǎn)單，通常只需要一個(gè)配置文件即可完成項(xiàng)目的構(gòu)建和部署 。
    • Vite 支持多種前端框架和語(yǔ)言，可以靈活地選擇技術(shù)棧 。

  1. Vite 相對(duì)于 Webpack 的優(yōu)勢(shì)：
    • Vite 提供了更快的冷啟動(dòng)和熱模塊替換 。
    • Vite 支持原生 ESM，無(wú)需額外的轉(zhuǎn)譯和打包步驟 。
    • Vite 實(shí)現(xiàn)了按需加載，降低了構(gòu)建和加載的成本 。
    • Vite 提供了易配置和零配置選項(xiàng)，簡(jiǎn)化了項(xiàng)目設(shè)置 。

Vite 的設(shè)計(jì)哲學(xué)是盡可能利用現(xiàn)代瀏覽器的能力，減少不必要的打包操作，從而提高開(kāi)發(fā)效率。在生產(chǎn)環(huán)境中，Vite 使用 Rollup 進(jìn)行打包，確保了最終產(chǎn)物的優(yōu)化和性能 。

Vite 的核心組件功能主要包括以下幾個(gè)方面：

  1. 開(kāi)發(fā)服務(wù)器（Dev Server）：
    • Vite 提供了一個(gè)快速的開(kāi)發(fā)服務(wù)器，利用 HTTP/2 和 ES 模塊（ESM）來(lái)提供服務(wù)，實(shí)現(xiàn)快速的模塊加載和熱更新。

  1. 按需編譯：
    • Vite 在開(kāi)發(fā)模式下按需編譯請(qǐng)求的模塊，而不是一次性編譯整個(gè)項(xiàng)目，這大大提升了開(kāi)發(fā)時(shí)的響應(yīng)速度。

  1. 依賴預(yù)構(gòu)建：
    • Vite 使用 esbuild 預(yù)先構(gòu)建依賴，將 CommonJS、UMD 等模塊化規(guī)范轉(zhuǎn)換為 ESM，減少網(wǎng)絡(luò)請(qǐng)求次數(shù)，提高性能。

  1. 熱模塊替換（HMR）：
    • Vite 實(shí)現(xiàn)了高效的熱模塊替換機(jī)制，當(dāng)源代碼發(fā)生變化時(shí)，只替換變更的部分，而不需要重新加載整個(gè)頁(yè)面。

  1. 緩存機(jī)制：
    • Vite 利用 HTTP 緩存和文件系統(tǒng)緩存來(lái)提高性能，對(duì)于不經(jīng)常變動(dòng)的依賴使用強(qiáng)緩存，源碼部分使用協(xié)商緩存。

  1. 模塊路徑重寫(xiě)：
    • Vite 使用 es-module-lexer 和 magic-string 來(lái)解析和重寫(xiě)模塊路徑，以適應(yīng)瀏覽器的模塊加載機(jī)制。

  1. 構(gòu)建優(yōu)化：
    • 在生產(chǎn)模式下，Vite 使用 Rollup 或其他構(gòu)建工具來(lái)打包應(yīng)用，生成優(yōu)化后的靜態(tài)資源。

  1. 插件系統(tǒng)：
    • Vite 支持插件擴(kuò)展，允許開(kāi)發(fā)者通過(guò)插件來(lái)自定義構(gòu)建流程，例如添加對(duì)特定類型文件的支持。

下面 V 哥將一一介紹這些核心功能并結(jié)合案例講解。

1. 開(kāi)發(fā)服務(wù)器（Dev Server）

開(kāi)發(fā)服務(wù)器（Dev Server）是 Vite 的核心組件之一，它在開(kāi)發(fā)過(guò)程中提供了快速的模塊加載和熱更新功能。以下是開(kāi)發(fā)服務(wù)器的一個(gè)簡(jiǎn)單案例和解析：

來(lái)看一個(gè)案例

假設(shè)我們有一個(gè)簡(jiǎn)單的 Vue 3 項(xiàng)目，我們希望使用 Vite 來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器。以下是項(xiàng)目的目錄結(jié)構(gòu)和關(guān)鍵文件：

/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 = {
     // 配置選項(xiàng)...
   };

  1. package.json (package.json):

   {
     "scripts": {
       "dev": "vite"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0"
     }
   }

啟動(dòng)開(kāi)發(fā)服務(wù)器

在項(xiàng)目根目錄下，運(yùn)行以下命令來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run dev

這個(gè)命令會(huì)執(zhí)行 package.json 中定義的 "dev" 腳本，使用 Vite 啟動(dòng)開(kāi)發(fā)服務(wù)器。

具體解析一下

  1. 服務(wù)啟動(dòng)：
    • 當(dāng)執(zhí)行 npm run dev 時(shí)，Vite 會(huì)啟動(dòng)一個(gè)本地開(kāi)發(fā)服務(wù)器。

  1. 模塊服務(wù)：
    • 開(kāi)發(fā)服務(wù)器會(huì)監(jiān)聽(tīng)文件系統(tǒng)的變化，并為 index.html 中引用的 type="module" 腳本提供服務(wù)。

  1. 按需加載：
    • 當(dāng)瀏覽器請(qǐng)求 /src/main.js 時(shí)，Vite 服務(wù)器會(huì)提供該文件的內(nèi)容，并按需解析和加載依賴的模塊（如 App.vue）。

  1. 熱更新（HMR）：
    • 如果 App.vue 或其他依賴文件發(fā)生變化，Vite 會(huì)通過(guò) WebSocket 推送更新到瀏覽器，實(shí)現(xiàn)熱更新，而無(wú)需刷新頁(yè)面。

  1. 源碼映射（Sourcemap）：
    • Vite 可以生成 Sourcemap，使得在瀏覽器的開(kāi)發(fā)者工具中可以直接調(diào)試原始源代碼，而不是轉(zhuǎn)換后的代碼。

  1. 開(kāi)發(fā)與生產(chǎn)分離：
    • 開(kāi)發(fā)服務(wù)器專注于開(kāi)發(fā)體驗(yàn)，而生產(chǎn)構(gòu)建會(huì)使用 Rollup 或其他配置進(jìn)行優(yōu)化，確保生產(chǎn)環(huán)境的性能。

2. 按需編譯

按需編譯是 Vite 的一個(gè)核心特性，它允許開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中只編譯那些被實(shí)際請(qǐng)求的模塊，而不是整個(gè)項(xiàng)目。以下是使用 Vite 進(jìn)行按需編譯的案例和解析：

項(xiàng)目結(jié)構(gòu)

假設(shè)我們有以下項(xiàng)目結(jié)構(gòu)：

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

文件內(nèi)容

  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 = {
     // 配置選項(xiàng)...
   };

  1. package.json (package.json):

   {
     "scripts": {
       "dev": "vite"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0"
     }
   }

啟動(dòng)開(kāi)發(fā)服務(wù)器

在項(xiàng)目根目錄下，運(yùn)行以下命令來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run dev

按需編譯解析

  1. 首次加載：
    • 當(dāng)你訪問(wèn)應(yīng)用的主頁(yè)時(shí)，只有 main.js 和 App.vue 會(huì)被加載和編譯，因?yàn)樗鼈兪浅跏既肟邳c(diǎn)。

  1. 按需加載組件：
    • 當(dāng)用戶點(diǎn)擊按鈕觸發(fā) loadComponent 方法時(shí)，SomeComponent.vue 將被按需加載。由于 Vite 支持 ES 模塊，這個(gè)組件將通過(guò)動(dòng)態(tài) import() 語(yǔ)法異步加載。

  1. 編譯請(qǐng)求的模塊：
    • 當(dāng) SomeComponent.vue 被請(qǐng)求時(shí)，Vite 的開(kāi)發(fā)服務(wù)器會(huì)捕獲這個(gè)請(qǐng)求，并編譯該模塊，然后將其發(fā)送給瀏覽器。

  1. 熱更新（HMR）：
    • 如果 SomeComponent.vue 在開(kāi)發(fā)過(guò)程中被修改，Vite 將通過(guò) HMR 更新瀏覽器中的組件，而不需要重新加載整個(gè)頁(yè)面。

  1. 優(yōu)化開(kāi)發(fā)體驗(yàn)：
    • 按需編譯減少了初次加載的時(shí)間和資源消耗，同時(shí)保持了快速的模塊更新和熱替換能力。

一句話，Vite 通過(guò)按需編譯，從而提供更快速的開(kāi)發(fā)體驗(yàn)和更高效的資源管理。

3. 依賴預(yù)構(gòu)建

依賴預(yù)構(gòu)建是 Vite 的一個(gè)重要特性，它在項(xiàng)目啟動(dòng)之前預(yù)先處理項(xiàng)目依賴，將非 ES 模塊轉(zhuǎn)換為 ES 模塊，以減少開(kāi)發(fā)時(shí)的模塊請(qǐng)求次數(shù)和提高性能。以下是依賴預(yù)構(gòu)建的案例和解析：

項(xiàng)目結(jié)構(gòu)

假設(shè)我們有以下項(xiàng)目結(jié)構(gòu)：

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

文件內(nèi)容

  1. index.js (node_modules/some-pkg/index.js - 一個(gè) 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(); // 使用預(yù)構(gòu)建的依賴


   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 = {
     // 配置選項(xiàng)，例如別名 @ 指向 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"
     }
   }

啟動(dòng)開(kāi)發(fā)服務(wù)器

在項(xiàng)目根目錄下，運(yùn)行以下命令來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run dev

依賴預(yù)構(gòu)建過(guò)程解析

  1. 預(yù)構(gòu)建過(guò)程：
    • 當(dāng) Vite 啟動(dòng)時(shí)，它會(huì)檢查 node_modules 目錄中的依賴，并使用 esbuild 這個(gè)高性能的 JavaScript 打包器來(lái)預(yù)構(gòu)建這些依賴。

  1. 轉(zhuǎn)換模塊類型：
    • 如果依賴是 CommonJS 或其他非 ES 模塊類型，esbuild 會(huì)將其轉(zhuǎn)換為 ES 模塊，以便瀏覽器能夠通過(guò) import 語(yǔ)句加載。

  1. 減少請(qǐng)求次數(shù)：
    • 通過(guò)預(yù)構(gòu)建，Vite 可以將多個(gè)小的依賴模塊合并為一個(gè)大的模塊，從而減少 HTTP 請(qǐng)求次數(shù)，加快頁(yè)面加載速度。

  1. 緩存優(yōu)化：
    • 預(yù)構(gòu)建的依賴會(huì)被緩存到 node_modules/.vite 目錄中，這樣在開(kāi)發(fā)過(guò)程中，只有當(dāng)依賴發(fā)生變化時(shí)，才會(huì)重新構(gòu)建，否則直接使用緩存。

  1. 兼容性：
    • 預(yù)構(gòu)建確保了即使在不支持原生 ES 模塊的舊版瀏覽器環(huán)境中，依賴也能被正確加載和執(zhí)行。

  1. 開(kāi)發(fā)服務(wù)器啟動(dòng)：
    • 一旦預(yù)構(gòu)建完成，Vite 將啟動(dòng)開(kāi)發(fā)服務(wù)器，提供源代碼和預(yù)構(gòu)建依賴的服務(wù)。

小結(jié)一下，Vite 能夠顯著提高大型項(xiàng)目的開(kāi)發(fā)效率和性能，同時(shí)確保了代碼的兼容性和模塊的按需加載。

4. 熱模塊替換（HMR）

熱模塊替換（Hot Module Replacement）是 Vite 在開(kāi)發(fā)過(guò)程中提供的一項(xiàng)功能，它允許開(kāi)發(fā)者在不刷新整個(gè)瀏覽器頁(yè)面的情況下，替換、添加或刪除模塊。下面是 HMR 案例和解析，一起來(lái)看看：

項(xiàng)目結(jié)構(gòu)

假設(shè)我們有以下項(xiàng)目結(jié)構(gòu)：

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

文件內(nèi)容

  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 默認(rèn)開(kāi)啟，無(wú)需額外配置
   };

  1. package.json (package.json):

   {
     "scripts": {
       "dev": "vite"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0"
     }
   }

啟動(dòng)開(kāi)發(fā)服務(wù)器

在項(xiàng)目根目錄下，運(yùn)行以下命令來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run dev

HMR 過(guò)程解析

  1. 開(kāi)發(fā)服務(wù)器啟動(dòng)：
    • 當(dāng)你啟動(dòng) Vite 時(shí)，開(kāi)發(fā)服務(wù)器會(huì)啟動(dòng)，并自動(dòng)開(kāi)啟 HMR 功能。

  1. 修改 Button 組件：
    • 假設(shè)你正在開(kāi)發(fā)過(guò)程中修改了 Button.vue 的模板或腳本。

  1. HMR 替換模塊：
    • 保存文件后，Vite 會(huì)編譯修改的 Button.vue 組件，并使用 HMR 更新瀏覽器中的對(duì)應(yīng)模塊，而不需要重新加載整個(gè)頁(yè)面。

  1. 狀態(tài)保持：
    • 由于 HMR 的特性，Button.vue 中的 count 狀態(tài)會(huì)保持不變，即使組件被重新加載。用戶會(huì)看到按鈕上顯示的計(jì)數(shù)在點(diǎn)擊后繼續(xù)增加，而頁(yè)面不會(huì)刷新。

  1. 瀏覽器開(kāi)發(fā)者工具：
    • 在瀏覽器的開(kāi)發(fā)者工具中，你可以看到網(wǎng)絡(luò)請(qǐng)求只針對(duì)修改的模塊，而不是整個(gè)資源。

小結(jié)一下，我們可以看到 Vite 的 HMR 功能使得開(kāi)發(fā)更加高效，允許開(kāi)發(fā)者快速迭代組件，同時(shí)保持應(yīng)用狀態(tài)和用戶體驗(yàn)。

5. 緩存機(jī)制

緩存機(jī)制在 Vite 中主要體現(xiàn)在兩個(gè)方面：HTTP 緩存和文件系統(tǒng)緩存。以下是緩存機(jī)制的案例和解析：

項(xiàng)目結(jié)構(gòu)

假設(shè)我們有以下項(xiàng)目結(jié)構(gòu)：

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

文件內(nèi)容

  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 = {
     // 配置選項(xiàng)...
   };

  1. package.json (package.json):

   {
     "scripts": {
       "dev": "vite"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0"
     }
   }

啟動(dòng)開(kāi)發(fā)服務(wù)器

在項(xiàng)目根目錄下，運(yùn)行以下命令來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run dev

緩存機(jī)制解析

  1. HTTP 緩存：
    • Vite 為靜態(tài)資源設(shè)置了 HTTP 緩存頭。對(duì)于不經(jīng)常變動(dòng)的資源（如預(yù)構(gòu)建的依賴），Vite 使用 Cache-Control 響應(yīng)頭，指定資源可以被瀏覽器緩存。

  1. 文件系統(tǒng)緩存：
    • Vite 會(huì)在 node_modules/.vite 目錄下緩存預(yù)構(gòu)建的依賴。當(dāng)沒(méi)有發(fā)生變化時(shí)，Vite 會(huì)直接從這個(gè)緩存中讀取依賴，避免重復(fù)構(gòu)建。

  1. 示例操作：
    • 假設(shè)你修改了 App.vue 中的 message 數(shù)據(jù)。保存文件后，Vite 會(huì)觸發(fā) HMR 更新，但不會(huì)重新構(gòu)建整個(gè)項(xiàng)目的依賴。

  1. 瀏覽器緩存利用：
    • 當(dāng)你訪問(wèn)開(kāi)發(fā)服務(wù)器提供的資源時(shí)（如 main.js），瀏覽器會(huì)根據(jù) HTTP 響應(yīng)頭中的緩存指令緩存這些資源。下次訪問(wèn)相同的資源時(shí)，如果資源沒(méi)有更新，瀏覽器會(huì)使用本地緩存，而不是從服務(wù)器重新下載。

  1. 協(xié)商緩存：
    • 對(duì)于源碼文件，Vite 使用 HTTP 協(xié)商緩存（如 ETag 或 Last-Modified）。當(dāng)源文件有更新時(shí)，Vite 會(huì)更新這些標(biāo)記，瀏覽器會(huì)根據(jù)這些標(biāo)記判斷是否需要從服務(wù)器獲取新的資源。

  1. 開(kāi)發(fā)體驗(yàn)優(yōu)化：
    • 通過(guò)緩存機(jī)制，Vite 減少了開(kāi)發(fā)過(guò)程中的網(wǎng)絡(luò)傳輸和重復(fù)構(gòu)建，提高了開(kāi)發(fā)服務(wù)器的響應(yīng)速度和開(kāi)發(fā)體驗(yàn)。

Vite 的緩存機(jī)制幫助提高開(kāi)發(fā)效率的同時(shí)，減少不必要的資源加載和構(gòu)建過(guò)程，get到了沒(méi)。

6. 模塊路徑重寫(xiě)

Vite 在處理模塊路徑時(shí)，需要將基于 Node.js require.resolve 的路徑轉(zhuǎn)換為瀏覽器可識(shí)別的路徑。此外，Vite 還支持使用 @ 符號(hào)作為 src 目錄的別名，這在 Vue 單文件組件（SFC）中尤為常見(jiàn)。來(lái)看一下這個(gè)案例和解析：

項(xiàng)目結(jié)構(gòu)

假設(shè)我們有以下項(xiàng)目結(jié)構(gòu)：

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

文件內(nèi)容

  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 = {
     // 設(shè)置別名 @ 指向 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"
     }
   }

啟動(dòng)開(kāi)發(fā)服務(wù)器

在項(xiàng)目根目錄下，運(yùn)行以下命令來(lái)啟動(dòng)開(kāi)發(fā)服務(wù)器：

npm run dev

解析

  1. 別名配置：
    • 在 vite.config.js 中，我們?cè)O(shè)置了 @ 別名指向項(xiàng)目的 src 目錄。這樣，我們就可以使用 @/views/Home.vue 這樣的路徑來(lái)代替相對(duì)路徑或絕對(duì)路徑。

  1. 模塊請(qǐng)求：
    • 當(dāng) Home.vue 被 main.js 引用時(shí)，瀏覽器會(huì)發(fā)送一個(gè)請(qǐng)求到 Vite 開(kāi)發(fā)服務(wù)器，請(qǐng)求 @/views/Home.vue。

  1. 路徑重寫(xiě)：
    • Vite 服務(wù)器接收到請(qǐng)求后，會(huì)根據(jù)配置的別名將 @/views/Home.vue 轉(zhuǎn)換為實(shí)際的文件路徑 /src/views/Home.vue。

  1. 處理單文件組件：
    • Vite 使用 es-module-lexer 來(lái)解析 import 語(yǔ)句，并根據(jù)瀏覽器對(duì) ES 模塊的支持來(lái)重寫(xiě)模塊路徑。

  1. 服務(wù)模塊：
    • Vite 將請(qǐng)求的模塊進(jìn)行處理，如果是 Vue 單文件組件，Vite 會(huì)將其分解為 .js 和 .css（如果有）等不同的模塊，并單獨(dú)服務(wù)這些模塊。

  1. 瀏覽器加載：
    • 瀏覽器根據(jù) Vite 服務(wù)的路徑加載模塊，由于路徑已經(jīng)被轉(zhuǎn)換為瀏覽器可識(shí)別的路徑，模塊能夠正確加載并執(zhí)行。

Vite 通過(guò)模塊路徑重寫(xiě)支持別名和單文件組件的按需加載，從而提高開(kāi)發(fā)效率和模塊化管理的便利性，有點(diǎn)意思。

7. 構(gòu)建優(yōu)化

構(gòu)建優(yōu)化是 Vite 在生產(chǎn)環(huán)境下的關(guān)鍵特性，它確保最終的靜態(tài)資源被壓縮、分割和優(yōu)化以提高應(yīng)用的性能。以下是構(gòu)建優(yōu)化的案例和解析：

項(xiàng)目結(jié)構(gòu)

假設(shè)我們有以下項(xiàng)目結(jié)構(gòu)：

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

文件內(nèi)容

  1. main.js (src/main.js):

   import { createApp } from 'vue';
   import App from './App.vue';
   import SomeLib from './SomeLib';


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


   // 使用庫(kù)函數(shù)
   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: {
       // 配置生產(chǎn)環(huán)境構(gòu)建選項(xiàng)
       minify: 'terser', // 使用 terser 進(jìn)行代碼壓縮
       sourcemap: true,   // 生成 sourcemap 文件
       rollupOptions: {
         output: {
           manualChunks: {
             lib: ['src/SomeLib.js'], // 將 SomeLib.js 單獨(dú)打包成一個(gè) chunk
           }
         }
       }
     }
   };

  1. package.json (package.json):

   {
     "scripts": {
       "build": "vite build"
     },
     "dependencies": {
       "vue": "^3.0.0"
     },
     "devDependencies": {
       "vite": "^2.0.0",
       "terser": "^5.0.0"
     }
   }

構(gòu)建項(xiàng)目

在項(xiàng)目根目錄下，運(yùn)行以下命令來(lái)構(gòu)建項(xiàng)目：

npm run build

解析一下

  1. 配置構(gòu)建選項(xiàng)：
    • 在 vite.config.js 中，我們配置了構(gòu)建選項(xiàng)，包括代碼壓縮工具 terser 和 sourcemap 生成。

  1. 手動(dòng)分塊：
    • 我們使用 rollupOptions 中的 manualChunks 配置將 SomeLib.js 單獨(dú)打包成一個(gè) chunk，這有助于按需加載和緩存。

  1. 執(zhí)行構(gòu)建：
    • 運(yùn)行 npm run build 后，Vite 會(huì)啟動(dòng)構(gòu)建流程，根據(jù)配置進(jìn)行代碼壓縮、分塊等操作。

  1. 代碼壓縮：
    • 使用 terser，Vite 會(huì)壓縮 JavaScript 代碼，移除多余的空格、注釋，并進(jìn)行一些優(yōu)化以減少文件大小。

  1. 生成 sourcemap：
    • 構(gòu)建過(guò)程中，Vite 會(huì)生成 sourcemap 文件，這有助于在生產(chǎn)環(huán)境中調(diào)試代碼。

  1. 輸出構(gòu)建結(jié)果：
    • 構(gòu)建完成后，Vite 會(huì)在 dist 目錄下生成優(yōu)化后的靜態(tài)資源，包括 JavaScript、CSS 和其他靜態(tài)資源文件。

  1. 部署：
    • 構(gòu)建結(jié)果可以直接部署到生產(chǎn)服務(wù)器，由于進(jìn)行了優(yōu)化，應(yīng)用的加載速度和性能會(huì)得到提升。

Vite在生產(chǎn)環(huán)境中進(jìn)行構(gòu)建優(yōu)化，包括代碼壓縮、手動(dòng)分塊、sourcemap 生成等，以確保應(yīng)用的性能和可維護(hù)性。

8. 插件系統(tǒng)

Vite 的插件系統(tǒng)允許開(kāi)發(fā)者擴(kuò)展 Vite 的功能，例如添加對(duì)特定類型文件的支持、優(yōu)化構(gòu)建流程等，來(lái)看一下：

項(xiàng)目結(jié)構(gòu)

假設(shè)我們有以下項(xiàng)目結(jié)構(gòu)：

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

文件內(nèi)容

  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'; // 假設(shè)我們創(chuàng)建了一個(gè)自定義插件


   module.exports = {
     plugins: [
       vue(), // Vite 官方 Vue 插件，用于處理 Vue 單文件組件
       imageTransformPlugin, // 使用自定義插件來(lái)處理圖像轉(zhuǎn)換
     ],
     // 其他配置...
   };

  1. imageTransformPlugin.js (imageTransformPlugin.js):

   // 自定義插件來(lái)處理圖像文件
   export default {
     name: 'image-transform-plugin',


     transform(code, id) {
       if (id.endsWith('.png')) {
         // 假設(shè)我們對(duì)圖像進(jìn)行某種轉(zhuǎn)換處理
         const transformedCode = code.replace(/.png$/, '-transformed.png');
         return {
           code: transformedCode,
           map: null, // 這里簡(jiǎn)化處理，實(shí)際插件應(yīng)該生成 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 單文件組件。

  1. 創(chuàng)建自定義插件：
    • 我們創(chuàng)建了一個(gè)名為 imageTransformPlugin 的自定義插件，用于處理圖像文件的轉(zhuǎn)換。

  1. 配置插件：
    • 在 vite.config.js 中，我們將這兩個(gè)插件添加到 plugins 數(shù)組中，這樣 Vite 在構(gòu)建時(shí)就會(huì)應(yīng)用這些插件。

  1. 運(yùn)行 Vite：
    • 當(dāng)你運(yùn)行 npm run dev 或 npm run build 時(shí)，Vite 會(huì)使用配置的插件來(lái)處理項(xiàng)目資源。

過(guò)程解析

  • Vue 插件 (@vitejs/plugin-vue)：
    • 這個(gè)插件使得 Vite 能夠識(shí)別和處理 .vue 文件，將它們分解為 JavaScript、CSS 和模板代碼，并應(yīng)用 HMR。

  • 自定義圖像轉(zhuǎn)換插件 (imageTransformPlugin)：
    • 我們的自定義插件攔截了以 .png 結(jié)尾的文件請(qǐng)求，并對(duì)其進(jìn)行了簡(jiǎn)單的“轉(zhuǎn)換”（這里只是示例，實(shí)際中可能是更復(fù)雜的圖像處理邏輯）。

  • 插件鉤子：
    • Vite 插件系統(tǒng)提供了多種鉤子（例如 transform），允許插件在構(gòu)建過(guò)程中的不同階段介入和修改處理邏輯。

  • 應(yīng)用插件：
    • 當(dāng)請(qǐng)求圖像資源時(shí)，Vite 會(huì)首先查找是否有插件處理該資源。在我們的案例中，自定義插件會(huì)攔截請(qǐng)求并返回“轉(zhuǎn)換”后的資源。

Vite 插件系統(tǒng)允許開(kāi)發(fā)者自定義構(gòu)建流程，增強(qiáng) Vite 的功能，以適應(yīng)各種開(kāi)發(fā)需求。

最后

除了以上這些，Vite 還對(duì) Vue 3 和 React 17+ 的官方支持，允許開(kāi)發(fā)者使用這些前端框架進(jìn)行開(kāi)發(fā)。Vite 內(nèi)置了對(duì) TypeScript 的支持，無(wú)需額外配置即可使用 TypeScript 開(kāi)發(fā)。Vite能夠處理 CSS 文件和各種靜態(tài)資源，包括圖片、字體等，并支持 CSS 預(yù)處理器。Vite 能夠生成 Sourcemap，方便開(kāi)發(fā)者在瀏覽器中調(diào)試源代碼。Vite 支持在構(gòu)建過(guò)程中注入環(huán)境變量，使得配置更加靈活。如果你還知道哪些關(guān)于 Vite 的能力，歡迎給 V 哥點(diǎn)撥一下，在此感謝。

這些核心組件功能共同構(gòu)成了 Vite 的強(qiáng)大能力，使它成為一個(gè)高效、靈活且易于使用的前端構(gòu)建工具，如果你還沒(méi)用上 Vite，那就抓緊搞起來(lái)吧。

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)