前言

如果近期你有關(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)在微博介紹過了 vite ，是一個(gè)基于瀏覽器原生 ESM 的開發(fā)服務(wù)器。

早期 Webpack 剛出來(lái)的時(shí)候，是為了解決低版本瀏覽器不支持 ESM 模塊化的問題，將各個(gè)分散的 JavaScript 模塊合并成一個(gè)文件，同時(shí)將多個(gè) JavaScript 腳本文件合并成一個(gè)文件，減少 HTTP 請(qǐng)求的數(shù)量，有助于提升頁(yè)面首次訪問的速度。后期 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 通過創(chuàng)建一個(gè) style 標(biāo)簽，將樣式添加到 head 標(biāo)簽中。

小結(jié)

這里只是簡(jiǎn)單的解析了 vite 是如何攔截請(qǐng)求，然后返回需要的文件的過程，省略了熱更新的代碼。而且待發(fā)布 vite v1 除了啟動(dòng)服務(wù)用來(lá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ǔ)，中文是「快」的意思。

●?寫給前端工程師看的Flutter教程

●?一杯茶的時(shí)間，上手函數(shù)式編程

●?一杯茶的時(shí)間，上手 Svelte 前端框架

·END·

匯聚精彩的免費(fèi)實(shí)戰(zhàn)教程

喜歡本文，點(diǎn)個(gè)“在看”告訴我