總方針：是什么？從哪里來？要到哪里去？
一、是什么？
vite ------- vue 作者尤雨溪開發(fā)的web開發(fā)工具
它具有的特性：靜態(tài)服務(wù)器、構(gòu)建工具、輕量、開箱即用、極速模塊熱替換、內(nèi)置Rollup 用于打包項目
作者在微博上的發(fā)言：
Vite，一個基于瀏覽器原生 ES imports 的開發(fā)服務(wù)器。利用瀏覽器去解析 imports，在服務(wù)器端按需編譯返回，完全跳過了打包這個概念，服務(wù)器隨起隨用。同時不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會隨著模塊增多而變慢。針對生產(chǎn)環(huán)境則可以把同一份代碼用 rollup 打。雖然現(xiàn)在還比較粗糙，但這個方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題。
它的主要特點：基于瀏覽器 native 的 ES module (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)?來開發(fā)，省略打包這個步驟，因為需要什么資源直接在瀏覽器里引入即可。
本質(zhì)上是用C++ / Rust / Go 重寫了依賴分析/模塊構(gòu)建能力，但是充分利用了已有的生態(tài)，使得開發(fā)成本極大降低。
二、從哪里來？
時下熱門的打包構(gòu)建工具有：parcel 、 rollup（es module/ tree shaking） 、 webpack(最強(qiáng)的性能、擴(kuò)展能力強(qiáng))
2.1 如何食用
命令行：npx create-vite-app <project-name>? /??yarn?create?vite-app?<project-name>
? cd <project-name>
? npm install (or `yarn`)
? npm run dev (or `yarn dev`)
如下圖即可食用：
2.2 背后的原理
2.2.1 如何去掉打包步驟？
打包的概念是開發(fā)者利用打包工具將應(yīng)用各個模塊集合在一起形成 bundle，以一定規(guī)則讀取模塊的代碼——以便在不支持模塊化的瀏覽器里使用。
為了在瀏覽器里加載各模塊，打包工具會借助膠水代碼用來組裝各模塊，比如 webpack 使用?map存放模塊 id 和路徑，使用?__webpack_require__?方法獲取模塊導(dǎo)出。
vite 利用瀏覽器原生支持模塊化導(dǎo)入這一特性，省略了對模塊的組裝，也就不需要生成 bundle，所以打包這一步就可以省略了。
2.2.2 如何實現(xiàn)按需加載？
webpack 之類的打包工具會將各模塊提前打包進(jìn) bundle 里，但打包的過程是靜態(tài)的——不管某個模塊的代碼是否執(zhí)行到，這個模塊都要打包到 bundle 里，這樣的壞處就是隨著項目越來越大打包后的 bundle 也越來越大。
開發(fā)者為了減少 bundle 大小，會使用動態(tài)引入?import()?的方式異步的加載模塊（ 被引入模塊依然需要提前打包)，又或者使用 tree shaking 等方式盡力的去掉未引用的模塊，然而這些方式都不如 vite 的優(yōu)雅，vite 可以只在需要某個模塊的時候動態(tài)（借助?import()?）的引入它，而不需要提前打包，雖然只能用在開發(fā)環(huán)境，不過這就夠了。
三、要到哪里去？
正如尤大大所言：徹底解決改一行代碼等半天熱更新的問題。咱們配好料就等餃子下鍋了，真香！
