【W(wǎng)eb技術(shù)】870- 10分鐘了解 Vite

Vite 是 vue的作者尤雨溪開發(fā)的打包工具，目前亮點是本地開發(fā)時熱加載編譯極快，在大型項目中體驗較好。

貼一下作者微博原話：

Vite，一個基于瀏覽器原生 ES imports 的開發(fā)服務(wù)器。利用瀏覽器去解析 imports，在服務(wù)器端按需編譯返回，完全跳過了打包這個概念，服務(wù)器隨起隨用。同時不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會隨著模塊增多而變慢。針對生產(chǎn)環(huán)境則可以把同一份代碼用 rollup 打包。雖然現(xiàn)在還比較粗糙，但這個方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題。

從上面可以看出：

• Vite 主要對應(yīng)的場景是開發(fā)模式，跳過打包按需加載，因此熱更新的速度非常快；
• 在大型項目上可以有效提高本地開發(fā)編譯打包的速度，解決 “改一行代碼等半天” 問題；
• 瀏覽器解析 imports，利用了 type="module" 功能，然后攔截瀏覽器發(fā)出的 ES imports 請求并做相應(yīng)處理；
• 生產(chǎn)模式是用 rollup 打包，這里后續(xù)應(yīng)該會做優(yōu)化；

一、現(xiàn)代瀏覽器的模塊功能

將script標簽的type屬性設(shè)置為module，那么在js中就可以使用模塊功能(import '**.js')，es6兼容性為IE11及以下不支持，從 Vue3 的 proxy 和 Vite 的模塊，可以看出尤大是徹底放棄 IE 了。

<script?type="module"?src="main.js">script>

<script?type="module">
import?{?a?}?from?'./a.js'
script>

二、攔截http請求

針對不同類型的文件做不同的處理

1. js文件 用 es-module-lexer 來對 js 進行的語法分析獲取 imports 數(shù)組（依賴分析），然后將import語法替換為請求對應(yīng)的js文件。

原代碼：

<div?id="app">div>
<script?type="module">
import?{?createApp?}?from?'vue'
import?App?from?'./App.vue'

createApp(App).mount('#app')
script>

轉(zhuǎn)換后：

<div?id="app">div>
<script?type="module">
import?{?createApp?}?from?'/@modules/vue'
import?App?from?'./App.vue'

createApp(App).mount('#app')
script>

2. vue文件

vue單文件組件包含的三個部分 template、script、style, Vite 會將單文件組件分成三個部分分別請求，以及做相應(yīng)處理。

2.1 template

Vite 將 template 編譯成 render 函數(shù)后返回。

2.2 script

分析 js 中的 import 依賴，重新發(fā)起請求。

2.3 style

將 style 編譯成 css 插入head中。原本的 App.vue 文件是：

<template>
??<h1>Hello?Vite?+?Vue?3!h1>
??<p>Edit?./App.vue?to?test?hot?module?replacement?(HMR).p>
??<p>
????<span>Count?is:?{{?count?}}span>
????<button?@click="count++">incrementbutton>
??p>
template>

<script>
export?default?{
??data:?()?=>?({?count:?0?}),
}
script>

<style?scoped>
h1?{
??color:?#4fc08d;
}

h1,?p?{
??font-family:?Arial,?Helvetica,?sans-serif;
}
style>

轉(zhuǎn)換后變成了：

//?localhost:3000/App.vue
import?{?updateStyle?}?from?"/@hmr"

//?抽出?script?邏輯
const?__script?=?{
??data:?()?=>?({?count:?0?}),
}
//?將?style?拆分成?/App.vue?type=style?請求，由瀏覽器繼續(xù)發(fā)起請求獲取樣式
updateStyle("c44b8200-0",?"/App.vue?type=style&index=0&t=1588490870523")
__script.__scopeId?=?"data-v-c44b8200"?//?樣式的?scopeId

//?將?template?拆分成?/App.vue?type=template?請求，由瀏覽器繼續(xù)發(fā)起請求獲取?render?function
import?{?render?as?__render?}?from?"/App.vue?type=template&t=1588490870523&t=1588490870523"
__script.render?=?__render?//?render?方法掛載，用于?createApp?時渲染
__script.__hmrId?=?"/App.vue"?//?記錄?HMR?的?id，用于熱更新
__script.__file?=?"/XXX/web/vite-test/App.vue"?//?記錄文件的原始的路徑，后續(xù)熱更新能用到
export?default?__script

三、熱更新

Vite 的是通過 WebSocket 來實現(xiàn)熱更新通信，當代碼改動以后，通過 websocket 僅向瀏覽器推送改動的文件。因此 Vite 本地熱更新的速度不會受項目的大小影響太多，在大型項目中本地開發(fā)速度快。Vite 的客戶端熱更新代碼是在 app.vue 文件編譯過程中，將代碼注入進去的。

四、Vite 和 vue-cli 的優(yōu)缺點對比

五、小結(jié) 目前 Vite 正在以很快的速度迭代著，優(yōu)化自身的功能，未來可期

>原文:https://juejin.cn/post/6928175048163491848