久久精品乱子伦观看,日一区二区,贱奴请主人踩贱乳调教视频

10分鐘了解一下最近很火的vue打包工具Vite

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2024年4月3日 10:18 本文熱度 744

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

貼一下作者微博原話：

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

從上面可以看出：

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

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

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

二、攔截http請(qǐng)求

針對(duì)不同類型的文件做不同的處理

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

原代碼：

轉(zhuǎn)換后：

2. vue文件

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

2.1 template

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

2.2 script

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

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>

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

三、熱更新

Vite 的是通過 WebSocket 來實(shí)現(xiàn)熱更新通信，當(dāng)代碼改動(dòng)以后，通過 websocket 僅向?yàn)g覽器推送改動(dòng)的文件。因此 Vite 本地?zé)岣碌乃俣炔粫?huì)受項(xiàng)目的大小影響太多，在大型項(xiàng)目中本地開發(fā)速度快。Vite 的客戶端熱更新代碼是在 app.vue 文件編譯過程中，將代碼注入進(jìn)去的。