面向未來的前端構(gòu)建工具-vite

前言

如果近期你有關(guān)注 Vue 的動態(tài)，就能發(fā)現(xiàn) Vue 作者最近一直在搗鼓的新工具 vite。vite 1.0 目前已經(jīng)進入了 rc 版本，馬上就要正式發(fā)布 1.0 的版本了。幾個月前，尤雨溪就已經(jīng)在微博介紹過了 vite ，是一個基于瀏覽器原生 ESM 的開發(fā)服務器。

早期 Webpack 剛出來的時候，是為了解決低版本瀏覽器不支持 ESM 模塊化的問題，將各個分散的 JavaScript 模塊合并成一個文件，同時將多個 JavaScript 腳本文件合并成一個文件，減少 HTTP 請求的數(shù)量，有助于提升頁面首次訪問的速度。后期 Webpack 乘勝追擊，引入了 Loader、Plugin 機制，提供了各種構(gòu)建相關(guān)的能力（babel轉(zhuǎn)義、css合并、代碼壓縮），取代了同期的 Browserify、Gulp。

如今，HTTP/2 的盛行，HTTP/3 也即將發(fā)行，再加上 5G 網(wǎng)絡的商用，減少 HTTP 請求數(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)容，會被 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 的處理也不復雜，拿到 style 標簽的內(nèi)容，然后 js 通過創(chuàng)建一個 style 標簽，將樣式添加到 head 標簽中。

小結(jié)

這里只是簡單的解析了 vite 是如何攔截請求，然后返回需要的文件的過程，省略了熱更新的代碼。而且待發(fā)布 vite v1 除了啟動服務用來開發(fā)，還支持了 rollup 打包，輸出生產(chǎn)環(huán)境代碼的能力。

總結(jié)

vite 剛剛發(fā)布的時候，還只能做 vue 的配套工具使用，現(xiàn)在已經(jīng)支持了 JSX、TypeScript、Web Assembly、PostCSS 等等一系列能力。我們就靜靜的等待 vue3 和 vite 的正式版發(fā)布吧，到底能不能革了 webpack 的命，就看天意了。

對了，vite 和 vue 一樣，來自法語，中文是「快」的意思。

推薦閱讀