【尤大出品】面向未來(lái)的前端構(gòu)建工具 - Vite
前言
如果近期你有關(guān)注 Vue 的動(dòng)態(tài)，就能發(fā)現(xiàn) Vue 作者最近一直在搗鼓的新工具 vite。vite 1.0 目前已經(jīng)進(jìn)入了 rc 版本，馬上就要正式發(fā)布 1.0 的版本了。幾個(gè)月前，尤雨溪就已經(jīng)在微博介紹過(guò)了 vite ，是一個(gè)基于瀏覽器原生 ESM 的開(kāi)發(fā)服務(wù)器。
尤雨溪微博早期 Webpack 剛出來(lái)的時(shí)候，是為了解決低版本瀏覽器不支持 ESM 模塊化的問(wèn)題，將各個(gè)分散的 JavaScript 模塊合并成一個(gè)文件，同時(shí)將多個(gè) JavaScript 腳本文件合并成一個(gè)文件，減少 HTTP 請(qǐng)求的數(shù)量，有助于提升頁(yè)面首次訪問(wèn)的速度。后期 Webpack 乘勝追擊，引入了 Loader、Plugin 機(jī)制，提供了各種構(gòu)建相關(guān)的能力（babel轉(zhuǎn)義、css合并、代碼壓縮），取代了同期的 Browserify、Gulp。
如今，HTTP/2 的盛行，HTTP/3 也即將發(fā)行，再加上 5G 網(wǎng)絡(luò)的商用，減少 HTTP 請(qǐng)求數(shù)量起到的作用已經(jīng)微乎其微，而且新版的瀏覽器基本已經(jīng)支持了 ESM（
//?解析后
import?HelloWorld?from?"/src/components/HelloWorld.vue";
let?__script;
export?default?(__script?=?{
????name:?"App",
????components:?{
????????HelloWorld
????}
})
import?{render?as?__render}?from?"/src/App.vue?type=template"
__script.render?=?__render
template 中的內(nèi)容，會(huì)被 vue 解析成 render 方法。關(guān)于 vue 模板是如何編譯成 render 方法的，可以看我的另一篇文章：《Vue 模板編譯原理》。
import?{
??parse,
??SFCDescriptor,
??compileTemplate
}?from?'@vue/compiler-sfc'
export?async?function?vueMiddleware(
??cwd:?string,?req,?res
)?{
??//?...
??if?(query.type?===?'template')?{
????//?返回模板
????const?{?code?}?=?compileTemplate({
??????filename,
??????source:?template.content,
????})
????sendJS(res,?code)
????return
??}
??if?(query.type?===?'style')?{
????//?返回樣式
??}
}
模板而 template 的樣式
import?{
??parse,
??SFCDescriptor,
??compileStyle,
??compileTemplate
}?from?'@vue/compiler-sfc'
export?async?function?vueMiddleware(
??cwd:?string,?req,?res
)?{
??//?...
??if?(query.type?===?'style')?{
????//?返回樣式
????const?index?=?Number(query.index)
????const?style?=?descriptor.styles[index]
????const?{?code?}?=?compileStyle({
??????filename,
??????source:?style.content
????})
????sendJS(
??????res,
??????`
??const?id?=?"vue-style-${index}"
??let?style?=?document.getElementById(id)
??if?(!style)?{
????style?=?document.createElement('style')
????style.id?=?id
????document.head.appendChild(style)
??}
??style.textContent?=?${JSON.stringify(code)}
????`.trim()
????)
??}
}
style 的處理也不復(fù)雜，拿到 style 標(biāo)簽的內(nèi)容，然后 js 通過(guò)創(chuàng)建一個(gè) style 標(biāo)簽，將樣式添加到 head 標(biāo)簽中。
小結(jié)
這里只是簡(jiǎn)單的解析了 vite 是如何攔截請(qǐng)求，然后返回需要的文件的過(guò)程，省略了熱更新的代碼。而且待發(fā)布 vite v1 除了啟動(dòng)服務(wù)用來(lái)開(kāi)發(fā)，還支持了 rollup 打包，輸出生產(chǎn)環(huán)境代碼的能力。
總結(jié)
vite 剛剛發(fā)布的時(shí)候，還只能做 vue 的配套工具使用，現(xiàn)在已經(jīng)支持了 JSX、TypeScript、Web Assembly、PostCSS 等等一系列能力。我們就靜靜的等待 vue3 和 vite 的正式版發(fā)布吧，到底能不能革了 webpack 的命，就看天意了。
對(duì)了，vite 和 vue 一樣，來(lái)自法語(yǔ)，中文是「快」的意思。
vite翻譯·END·
匯聚精彩的免費(fèi)實(shí)戰(zhàn)教程
喜歡本文，點(diǎn)個(gè)“在看”告訴我
