1、使用感受
在使用vite構(gòu)建項目后髓抑，真的炒雞快咙崎！之前的老項目webpack啟動構(gòu)建到30%的時候，新項目的vite早已經(jīng)完畢吨拍。（并不是說webpack不好褪猛，只是相對熱更新的速度而言比特是真香 ^^
2、why vite 官方解釋
在瀏覽器支持 ES 模塊之前羹饰，JavaScript 并沒有提供原生機(jī)制讓開發(fā)者以模塊化的方式進(jìn)行開發(fā)伊滋。而是使用工具抓取碳却、處理并將我們的源碼模塊串聯(lián)成可以在瀏覽器中運(yùn)行的文件。
當(dāng)我們開始構(gòu)建越來越大型的應(yīng)用時笑旺，需要處理的 JavaScript 代碼量也呈指數(shù)級增長昼浦。
瀏覽器開始原生支持 ES 模塊，且越來越多 JavaScript 工具使用編譯型語言編寫筒主。
-
服務(wù)器啟動
image.png -
熱更新
在 Vite 中关噪，HMR 是在原生 ESM 上執(zhí)行的。當(dāng)編輯一個文件時乌妙，Vite 只需要精確地使已編輯的模塊與其最近的 HMR 邊界之間的鏈?zhǔn)Щ?sup>[1]（大多數(shù)時候只是模塊本身）使兔，使得無論應(yīng)用大小如何，HMR 始終能保持快速更新藤韵。- ESM又是什么呢
ECMAScript 模塊（ESM）是在 Web 中使用模塊的規(guī)范虐沥。 所有現(xiàn)代瀏覽器均支持此功能，同時也是在 Web 中編寫模塊化代碼的推薦方式泽艘。
- ESM又是什么呢
默認(rèn)情況下欲险，webpack 將自動檢測文件是 ESM 還是其他模塊系統(tǒng)。
Node.js 通過設(shè)置 package.json 中的屬性來顯式設(shè)置文件模塊類型悉盆。 在 package.json 中設(shè)置 "type": "module" 會強(qiáng)制 package.json 下的所有文件使用 ECMAScript 模塊盯荤。 設(shè)置 "type": "commonjs" 將會強(qiáng)制使用 CommonJS 模塊。
{
"type": "module"
}
現(xiàn)在隨著瀏覽器的發(fā)展和技術(shù)規(guī)范的推進(jìn)焕盟，當(dāng)代大部分瀏覽器都已經(jīng)支持·type="module"的script標(biāo)簽下直接執(zhí)行解析import語句秋秤，在直接執(zhí)行到這一步的時候，瀏覽器會自動根據(jù)目錄路徑去請求路徑下的資源脚翘，只要觸發(fā)了請求灼卢，我們就可以“攔截”了，把請求的assets資源截取進(jìn)行處理来农，返回給瀏覽器執(zhí)行鞋真。
依照上述技術(shù)理論，只要有一個index.js就可以一步步import不停地向下收集依賴沃于，直至最后一個依賴涩咖，依次執(zhí)行，前幾年的打包工具（類似webpack）不就做了這個事嗎繁莹？當(dāng)然他做的整合更加復(fù)雜和詳細(xì)檩互，但是現(xiàn)在瀏覽器都已經(jīng)支持了，這一步就可以交給瀏覽器做了咨演，我們要做的闸昨，就是對依賴進(jìn)行解析。
未完待續(xù)~
