Vite基于原生 ESM 的 Web 開發(fā)構建工具

vite 是一個由原生 ESM 驅動的 Web 開發(fā)構建工具。在開發(fā)環(huán)境下基于瀏覽器原生 ES imports 開發(fā)，在生產環(huán)境下基于 Rollup 打包。

vite 作用

• 快速的冷啟動：不需要等待打包操作；
• 即時的熱模塊更新：替換性能和模塊數量的解耦讓更新飛起；
• 真正的按需編譯：不再等待整個應用編譯完成，這是一個巨大的改變。

vite 功能實現

• 提供 web server：借用了 koa 來啟動服務
• 模塊解析：核心是攔截瀏覽器對模塊的請求
• 支持 /@module/ ：判斷路徑是否以 /@module/ 開頭，如果是取出包名，去 node_module 里找到這個庫，基于 package.json 返回對應的內容
• 文件編譯：攔截了對模塊的請求并執(zhí)行實時編譯

vite 運行原理

• 在瀏覽器端使用 export、import 的方式導入和導出模塊，在 script 標簽里設置 type="module" （ ES Modules 目前主流的瀏覽器都已經支持）。