【Web技術】870- 10分鐘瞭解 Vite

原創

2021-02-18 21:21

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

貼一下作者微博原話：

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

從上面可以看出：

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

一、現代瀏覽器的模塊功能

將script標籤的type屬性設置爲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請求

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

js文件用 es-module-lexer 來對 js 進行的語法分析獲取 imports 數組（依賴分析），然後將import語法替換爲請求對應的js文件。

原代碼：

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

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

轉換後：

<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 會將單文件組件分成三個部分分別請求，以及做相應處理。

2.1 template

Vite 將 template 編譯成 render 函數後返回。

2.2 script

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

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++">increment</button>
  </p>
</template>

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

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

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

轉換後變成了：

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

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

// 將 template 拆分成 /App.vue?type=template 請求，由瀏覽器繼續發起請求獲取 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" // 記錄文件的原始的路徑，後續熱更新能用到
export default __script