引用

中文官網：https://vitejs.cn/

參考來源：https://juejin.cn/post/6898116372887240712

概念

Vite，一個基於瀏覽器原生 ES imports 的開發伺服器。

利用瀏覽器去解析 imports，在伺服器端按需編譯返回，完全跳過了打包這個概念，伺服器隨起隨用,支援熱更新，而且熱更新的速度不會隨著模組增多而變慢。

針對生產環境則可以把同一份程式碼用 rollup 打包。

優勢

快速冷啟動伺服器

即時熱模組更換（HMR）

真正的按需編譯

工作原理

當宣告一個 script 標籤型別為 module 時，如： <script type="module" src="/src/main.js"></script>，

瀏覽器就會向伺服器發起一個GET http://localhost:3000/src/main.js 請求main.js檔案：

 瀏覽器請求到了main.js檔案，檢測到內部含有import引入的包，又會對其內部的 import 引用發起 HTTP 請求獲取模組的內容檔案

如： GET http://localhost:3000/@modules/vue.js

如：GET http://localhost:3000/src/App.vue

其中，Vite 的主要功能就是通過劫持瀏覽器的這些請求，並在後端進行相應的處理，將專案中使用的檔案通過簡單的分解與整合，然後再返回給瀏覽器渲染頁面，

vite整個過程中沒有對檔案進行打包編譯

 vite構建react專案（構建vue專案可見vite官網）

1.  安裝vite：yarn create vite 或 npm init vite@latest
2. 初始化react專案（引用模板） ：npm init vite-react-app --template react
3. 安裝依賴包：yarn install
4. 執行專案：npm run dev

 註釋：vite專案各種配置（如：埠、介面跨域代理等），可以在官網的配置選單下查詢。