快捷導(dǎo)航

詳細(xì)解析Vite的ESM請(qǐng)求處理流程

更新時(shí)間：2026年03月09日 09:29:04 作者：拉不動(dòng)的豬

本文主要介紹了詳細(xì)解析Vite的ESM請(qǐng)求處理流程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、項(xiàng)目結(jié)構(gòu)示例

my-project/
├─ node_modules/
├─ src/
│  ├─ main.js        # 入口文件
│  ├─ App.vue        # 根組件
│  ├─ utils/
│  │  └─ math.js     # 工具模塊
├─ index.html        # 基礎(chǔ)HTML

二、完整請(qǐng)求處理流程

‌瀏覽器請(qǐng)求ESM‌
當(dāng)訪問(wèn)http://localhost:3000時(shí)，瀏覽器加載index.html并解析到：

```
<script type="module" src="/src/main.js"></script>
```

觸發(fā)對(duì)`main.js`的ESM請(qǐng)求

‌Vite攔截請(qǐng)求‌
Vite服務(wù)器攔截到/src/main.js請(qǐng)求，檢查發(fā)現(xiàn)：
- 該文件未被預(yù)構(gòu)建（非node_modules內(nèi)容）
- 未在內(nèi)存緩存中找到編譯結(jié)果
  進(jìn)入實(shí)時(shí)編譯流程

‌預(yù)構(gòu)建（Pre-Bundling） ‌

- 僅針對(duì)`node_modules`中的第三方依賴
- 將CommonJS/UMD模塊轉(zhuǎn)換為ESM格式
- 產(chǎn)物存儲(chǔ)在`.vite/deps`目錄并建立依賴圖譜

‌實(shí)時(shí)編譯（On-Demand Compilation） ‌

- 處理項(xiàng)目源碼（如`/src/`下的文件）
- 按需進(jìn)行TS轉(zhuǎn)譯、Vue SFC編譯等操作

‌實(shí)時(shí)編譯處理‌
Vite對(duì)main.js進(jìn)行以下處理：
```
// 原始main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```
- 將'vue'重寫(xiě)為預(yù)構(gòu)建路徑/node_modules/.vite/vue.js
- 將App.vue轉(zhuǎn)換為可執(zhí)行的ESM格式（拆分為script/style/template）

‌返回編譯結(jié)果‌
生成帶HMR支持的編譯后代碼：

import { createApp } from '/node_modules/.vite/vue.js'
import App from '/src/App.vue?import'

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

// 注入HMR客戶端代碼
if (import.meta.hot) {
  import.meta.hot.accept()
}

同時(shí)將該結(jié)果存入內(nèi)存緩存

實(shí)際編譯效果如下：

‌后續(xù)請(qǐng)求處理‌
當(dāng)瀏覽器請(qǐng)求App.vue時(shí)：
- 若開(kāi)發(fā)者未修改文件，直接返回緩存結(jié)果
- 若文件已修改，重新編譯并更新緩存

三、關(guān)鍵場(chǎng)景示例

‌場(chǎng)景1：修改工具函數(shù)‌

修改src/utils/math.js：

- export const add = (a, b) => a + b
+ export const add = (a, b) => a + b + 1

Vite檢測(cè)到文件變更：
- 使舊緩存失效
- 僅重新編譯math.js及其依賴鏈
- 通過(guò)HMR通知瀏覽器更新模塊

‌場(chǎng)景2：添加新依賴‌

新增src/composables/useCounter.js：

export default () => {
  const count = ref(0)
  const inc = () => count.value++
  return { count, inc }
}

首次導(dǎo)入時(shí)觸發(fā)實(shí)時(shí)編譯，后續(xù)請(qǐng)求直接讀緩存

四、緩存策略對(duì)比

文件類(lèi)型	緩存策略	示例
預(yù)構(gòu)建依賴	強(qiáng)緩存(max-age=1年)	/node_modules/.vite/
業(yè)務(wù)代碼	協(xié)商緩存(304)	src/components/*.vue
靜態(tài)資源	根據(jù)配置決定	public/logo.png

通過(guò)這種機(jī)制，Vite實(shí)現(xiàn)了開(kāi)發(fā)環(huán)境下的秒級(jí)啟動(dòng)和亞秒級(jí)熱更新。生產(chǎn)構(gòu)建時(shí)則切換為Rollup的完整打包流程以保證最佳性能。

到此這篇關(guān)于詳細(xì)解析Vite的ESM請(qǐng)求處理流程的文章就介紹到這了,更多相關(guān)Vite ESM請(qǐng)求處理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: