vue3官方文檔：https://cn.vitejs.dev/
vite官方文檔：https://cn.vuejs.org/
rollup官方文檔：https://rollupjs.org/guide/en/#overview
vite與webpack的不同
- webpack的開發(fā)模式的啟動機(jī)制是先打包后加載舍哄，所以每次更新會有一次比較長的打包過程
- vite熱更新的時候速度非常的快区丑，它是基于瀏覽器原生ES imports的開發(fā)服務(wù)器蛋叼，利用瀏覽器解析议惰，前端按需編譯返回硬梁，跳過了打包這一步杏节。而生產(chǎn)環(huán)境呢，是使用了rollup進(jìn)行打包垂涯。
看尤大在知乎上的文章有說明：如果說rollup對標(biāo)的是webpack core的話哩簿，vite對標(biāo)的就是（webpack+針對web的常用配置+webpack-dev-server）。
而雙方的使用場景也就不一樣了躏升，webpack有足夠的復(fù)雜圖辩棒，可以去靈活的根據(jù)項目配置，而vite首先就設(shè)定了目標(biāo)場景膨疏，預(yù)設(shè)了web的場景一睁，大部分的web構(gòu)建需求都可以直接做成默認(rèn)內(nèi)置。就可以在瀏覽器場景下利用遠(yuǎn)程ESM佃却，實現(xiàn)理論最優(yōu)的熱更新者吁。
基于vite構(gòu)建的vue項目
npm create vite@lastest
選擇vue.png
選擇ts.png
非常快速構(gòu)建成功.png
跳轉(zhuǎn)到項目中npm install后直接啟動項目饲帅。
項目啟動頁面.png
可以看到它的目錄結(jié)構(gòu)也是非常簡單的复凳，大致與我們慣常使用的一致：
image.png
而它的配置就在vite.config.ts文件中。
最后說一下使用感受：使用了vite的開發(fā)環(huán)境后灶泵，就很難回到webpack的環(huán)境了育八，太快了哈哈哈哈，最近支撐的項目還是使用了jquery并且沒有其他框架的原始項目赦邻，niginx配置髓棋，沒有本地啟動服務(wù)的這種，也就沒有熱更新惶洲，然后也變得非常難以忍受按声。
