不得不說一下vite

vite簡介

• Vite 是一個由原生 ESM 驅動的 Web 開發構建工具。在開發環境下基於瀏覽器原生 ES imports 開發，在生產環境下基於 Rollup 打包。

vite做用

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

vite運行原理

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

vite功能實現

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

相關資料

• https://github.com/vitejs/vite
• 有了 vite，還須要 webpack 麼？
• Vue3之——和Vite不得不說的事