簡單了解Vite

一：介紹

二：安裝

三：特點

四：與webpack原理的區分：

先看圖：

（1）webpack原理圖

（2）vite原理圖

解析：從兩圖對比得知，

webpack會先打包，然後啟動開發伺服器，請求伺服器時直接給予打包結果。而vite是直接啟動開發伺服器，請求哪個模組再對該模組進行實時編譯。（按需編譯）

由於現代瀏覽器本身就支援es module，會自動向依賴的module發出請求。vite充分利用這一點，將開發環境下的模組檔案，就作為瀏覽器要執行的檔案，而不是像webpack那樣進行打包合併。

由於vite在啟動的時候不需要打包，也就意味著不需要分析模組的依賴、不需要編譯，因此啟動速度非常快。當瀏覽器請求某個模組時，再根據需要對模組內容進行編譯。這種按需動態編譯的方式，極大的縮減了編譯時間，專案越複雜、模組越多，vite的優勢越明顯。

在hmr（熱更新）方面，當改動了乙個模組後，僅需讓瀏覽器重新請求該模組即可，不像webpack那樣需要把該模組的相關依賴模組全部編譯一次，效率更高。

當需要打包到生產環境時，vite使用傳統的rollup（也可以自己手動安裝webpack來）進行打包，因此，vite的主要優勢在開發階段。另外，由於vite利用的是es module，因此在**中（除了vite.config.js裡面，這裡是node的執行環境）不可以使用commonjs

五：啟動時間（vite比webpack的執行時間短，可為開發者提高效率）

webpack(圖一) vite(圖二)

六：vite 的index.html 不在public目錄下

vite(圖一) vue(圖二)

這是官網擷取的有關inde.html置於public目錄外的解釋。