Vite的原理分析

這篇文章主要介紹了Vite的原理分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1. 概述

Vite是一個(gè)更輕、更快的web應(yīng)用開(kāi)發(fā)工具，面向現(xiàn)代瀏覽器。底層基于ECMAScript標(biāo)準(zhǔn)原生模塊系統(tǒng)ES Module實(shí)現(xiàn)。他的出現(xiàn)是為了解決webpack冷啟動(dòng)時(shí)間過(guò)長(zhǎng)以及Webpack HMR熱更新反應(yīng)速度慢等問(wèn)題。

默認(rèn)情況下Vite創(chuàng)建的項(xiàng)目是一個(gè)普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴。

Vite創(chuàng)建的項(xiàng)目所需要的開(kāi)發(fā)依賴非常少，只有Vite和@vue/compiler-sfc。這里面Vite是一個(gè)運(yùn)行工具，compiler-sfc則是為了編譯.vue結(jié)尾的單文件組件。在創(chuàng)建項(xiàng)目的時(shí)候通過(guò)指定不同的模板也可以支持使用其他框架例如React。項(xiàng)目創(chuàng)建完成之后可以通過(guò)兩個(gè)命令啟動(dòng)和打包。

# 開(kāi)啟服務(wù)器
vite serve
# 打包
vite build

正是因?yàn)?code>Vite啟動(dòng)的web服務(wù)不需要編譯打包，所以啟動(dòng)的速度特別快，調(diào)試階段大部分運(yùn)行的代碼都是你在編輯器中書(shū)寫(xiě)的代碼，這相比于webpack的編譯后再呈現(xiàn)確實(shí)要快很多。當(dāng)然生產(chǎn)環(huán)境還是需要打包的，畢竟很多時(shí)候我們使用的最新ES規(guī)范在瀏覽器中還沒(méi)有被支持，Vite的打包過(guò)程和webpack類似會(huì)將所有文件進(jìn)行編譯打包到一起。對(duì)于代碼切割的需求Vite采用的是原生的動(dòng)態(tài)導(dǎo)入來(lái)實(shí)現(xiàn)的，所以打包結(jié)果只能支持現(xiàn)代瀏覽器，如果需要兼容老版本瀏覽器可以引入Polyfill。

使用Webpack打包除了因?yàn)闉g覽器環(huán)境并不支持模塊化和新語(yǔ)法外，還有就是模塊文件會(huì)產(chǎn)生大量的http請(qǐng)求。如果你使用模塊化的方式開(kāi)發(fā)，一個(gè)頁(yè)面就會(huì)有十幾甚至幾十個(gè)模塊，而且很多時(shí)候會(huì)出現(xiàn)幾kb的文件，打開(kāi)一個(gè)頁(yè)面要加載幾十個(gè)js資源這顯然是不合理的。

• Vite創(chuàng)建的項(xiàng)目幾乎不需要額外的配置默認(rèn)已經(jīng)支持TS、Less, Sass，Stylus，postcss了，但是需要單獨(dú)安裝對(duì)應(yīng)的編譯器，同時(shí)默認(rèn)還支持jsx和Web Assembly。

• Vite帶來(lái)的好處是提升開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中的體驗(yàn)，web開(kāi)發(fā)服務(wù)器不需要等待即可立即啟動(dòng)，模塊熱更新幾乎是實(shí)時(shí)的，所需的文件會(huì)按需編譯，避免編譯用不到的文件。并且開(kāi)箱即用避免loader及plugins的配置。

• Vite的核心功能包括開(kāi)啟一個(gè)靜態(tài)的web服務(wù)器，能夠編譯單文件組件并且提供HMR功能。當(dāng)啟動(dòng)vite的時(shí)候首先會(huì)將當(dāng)前項(xiàng)目目錄作為靜態(tài)服務(wù)器的根目錄，靜態(tài)服務(wù)器會(huì)攔截部分請(qǐng)求，當(dāng)請(qǐng)求單文件的時(shí)候會(huì)實(shí)時(shí)編譯，以及處理其他瀏覽器不能識(shí)別的模塊，通過(guò)websocket實(shí)現(xiàn)hmr。

2. 實(shí)現(xiàn)靜態(tài)測(cè)試服務(wù)器

首先實(shí)現(xiàn)一個(gè)能夠開(kāi)啟靜態(tài)web服務(wù)器的命令行工具。vite1.x內(nèi)部使用的是Koa來(lái)實(shí)現(xiàn)靜態(tài)服務(wù)器。(ps：node命令行工具可以查看我之前的文章，這里就不介紹了，直接貼代碼)。

npm init
npm install koa koa-send -D

工具bin的入口文件設(shè)置為本地的index.js

#!/usr/bin/env node

const Koa = require('koa')
const send = require('koa-send')

const app = new Koa()

// 開(kāi)啟靜態(tài)文件服務(wù)器
app.use(async (ctx, next) => {
    // 加載靜態(tài)文件
    await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html'})
    await next()
})

app.listen(5000)

console.log('服務(wù)器已經(jīng)啟動(dòng) http://localhost:5000')

這樣就編寫(xiě)好了一個(gè)node靜態(tài)服務(wù)器的工具。

3. 處理第三方模塊

我們的做法是當(dāng)代碼中使用了第三方模塊(node_modules中的文件)，可以通過(guò)修改第三方模塊的路徑給他一個(gè)標(biāo)識(shí)，然后在服務(wù)器中拿到這個(gè)標(biāo)識(shí)來(lái)處理這個(gè)模塊。

首先需要修改第三方模塊的路徑，這里需要一個(gè)新的中間件來(lái)實(shí)現(xiàn)。判斷一下當(dāng)前返回給瀏覽器的文件是否是javascript，只需要看響應(yīng)頭中的content-type。如果是javascript需要找到這個(gè)文件中引入的模塊路徑。ctx.body就是返回給瀏覽器的內(nèi)容文件。這里的數(shù)據(jù)是一個(gè)stream，需要轉(zhuǎn)換成字符串來(lái)處理。

const stream2string = (stream) => {
    return new Promise((resolve, reject) => {
        const chunks = [];
        stream.on('data', chunk => {chunks.push(chunk)})
        stream.on('end', () => { resolve(Buffer.concat(chunks).toString('utf-8'))})
        stream.on('error', reject)
    })
}

// 修改第三方模塊路徑
app.use(async (ctx, next) => {
    if (ctx.type === 'application/javascript') {
        const contents = await stream2string(ctx.body);
        // 將body中導(dǎo)入的路徑修改一下，重新賦值給body返回給瀏覽器
        // import vue from 'vue', 匹配到from '修改為from '@modules/
        ctx.body = contents.replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/');
    }
})

接著開(kāi)始加載第三方模塊, 這里同樣需要一個(gè)中間件，判斷請(qǐng)求路徑是否是修改過(guò)的@module開(kāi)頭，如果是的話就去node_modules里面加載對(duì)應(yīng)的模塊返回給瀏覽器。這個(gè)中間件要放在靜態(tài)服務(wù)器之前。

// 加載第三方模塊
app.use(async (ctx, next) => {
    if (ctx.path.startsWith('/@modules/')) {
        // 截取模塊名稱
        const moduleName = ctx.path.substr(10);
    }
})

拿到模塊名稱之后需要獲取模塊的入口文件，這里要獲取的是ES Module模塊的入口文件，需要先找到這個(gè)模塊的package.json然后再獲取這個(gè)package.json中的module字段的值也就是入口文件。

// 找到模塊路徑
const pkgPath = path.join(process.pwd(), 'node_modules', moduleName, 'package.json');
const pkg = require(pkgPath);
// 重新給ctx.path賦值，需要重新設(shè)置一個(gè)存在的路徑，因?yàn)橹暗穆窂绞遣淮嬖诘?
ctx.path = path.join('/node_modules', moduleName, pkg.module);
// 執(zhí)行下一個(gè)中間件
awiat next();

這樣瀏覽器請(qǐng)求進(jìn)來(lái)的時(shí)候雖然是@modules路徑，但是在加載之前將path路徑修改為了node_modules中的路徑，這樣在加載的時(shí)候就會(huì)去node_modules中獲取文件，將加載的內(nèi)容響應(yīng)給瀏覽器。

加載第三方模塊：

app.use(async (ctx, next) => {
    if (ctx.path.startsWith('/@modules/')) {
        // 截取模塊名稱
        const moduleName = ctx.path.substr(10);
        // 找到模塊路徑
        const pkgPath = path.join(process.pwd(), 'node_modules', moduleName, 'package.json');
        const pkg = require(pkgPath);
        // 重新給ctx.path賦值，需要重新設(shè)置一個(gè)存在的路徑，因?yàn)橹暗穆窂绞遣淮嬖诘?
        ctx.path = path.join('/node_modules', moduleName, pkg.module);
        // 執(zhí)行下一個(gè)中間件
        awiat next();
    }
})

4. 單文件組件處理

之前說(shuō)過(guò)瀏覽器是沒(méi)辦法處理.vue資源的, 瀏覽器只能識(shí)別js、css等常用資源，所以其他類型的資源都需要在服務(wù)端處理。當(dāng)請(qǐng)求單文件組件的時(shí)候需要在服務(wù)器將單文件組件編譯成js模塊返回給瀏覽器。

所以這里當(dāng)瀏覽器第一次請(qǐng)求App.vue的時(shí)候，服務(wù)器會(huì)把單文件組件編譯成一個(gè)對(duì)象，先加載這個(gè)組件，然后再創(chuàng)建一個(gè)對(duì)象。

import Hello from './src/components/Hello.vue'
const __script = {
    name: "App",
    components: {
        Hello
    }
}

接著再去加載入口文件，這次會(huì)告訴服務(wù)器編譯一下這個(gè)單文件組件的模板，返回一個(gè)render函數(shù)。然后將render函數(shù)掛載到剛創(chuàng)建的組件選項(xiàng)對(duì)象上，最后導(dǎo)出選項(xiàng)對(duì)象。

import { render as __render } from '/src/App.vue?type=template'
__script.render = __render
__script.__hmrId = '/src/App.vue'
export default __script

也就是說(shuō)vite會(huì)發(fā)送兩次請(qǐng)求，第一次請(qǐng)求會(huì)編譯單文件文件，第二次請(qǐng)求是編譯單文件模板返回一個(gè)render函數(shù)。

編譯單文件選項(xiàng)：

首先來(lái)實(shí)現(xiàn)一下第一次請(qǐng)求單文件的情況。需要把單文件組件編譯成一個(gè)選項(xiàng)，這里同樣用一個(gè)中間件來(lái)實(shí)現(xiàn)。這個(gè)功能要在處理靜態(tài)服務(wù)器之后，處理第三方模塊路徑之前。

首先需要對(duì)單文件組件進(jìn)行編譯需要借助compiler-sfc。

// 處理單文件組件
app.use(async (ctx, next) => {
    if (ctx.path.endsWith('.vue')) {
        // 獲取響應(yīng)文件內(nèi)容，轉(zhuǎn)換成字符串
        const contents = await streamToString(ctx.body);
        // 編譯文件內(nèi)容
        const { descriptor } = compilerSFC.parse(contents);
        // 定義狀態(tài)碼
        let code;
        // 不存在type就是第一次請(qǐng)求
        if (!ctx.query.type) {
            code = descriptor.script.content;
            // 這里的code格式是, 需要改造成我們前面貼出來(lái)的vite中的樣子
            // import Hello from './components/Hello.vue'
            // export default {
            //      name: 'App',
            //      components: {
            //          Hello
            //      }
            //  }
            // 改造code的格式，將export default 替換為const __script =
            code = code.relace(/export\s+default\s+/g, 'const __script = ')
            code += `
                import { render as __render } from '${ctx.path}?type=template'
                __script.rener = __render
                export default __script
            `
        }
        // 設(shè)置瀏覽器響應(yīng)頭為js
        ctx.type = 'application/javascript'
        // 將字符串轉(zhuǎn)換成數(shù)據(jù)流傳給下一個(gè)中間件。
        ctx.body = stringToStream(code);
    }
    await next()
})

const stringToStream = text => {
    const stream = new Readable();
    stream.push(text);
    stream.push(null);
    return stream;
}

npm install @vue/compiler-sfc -D

接著我們?cè)賮?lái)處理單文件組件的第二次請(qǐng)求，第二次請(qǐng)求url會(huì)帶上type=template參數(shù)，需要將單文件組件模板編譯成render函數(shù)。

首先需要判斷當(dāng)前請(qǐng)求中有沒(méi)有type=template。

if (!ctx.query.type) {
    ...
} else if (ctx.query.type === 'template') {
    // 獲取編譯后的對(duì)象 code就是render函數(shù)
    const templateRender = compilerSFC.compileTemplate({ source: descriptor.template.content })
    // 將render函數(shù)賦值給code返回給瀏覽器
    code = templateRender.code
}

這里還要處理一下工具中的process.env，因?yàn)檫@些代碼會(huì)返回到瀏覽器中運(yùn)行，如果不處理會(huì)默認(rèn)為node導(dǎo)致運(yùn)行失敗?？梢栽谛薷牡谌侥K路徑的中間件中修改，修改完路徑之后再添加一條修改process.env。

// 修改第三方模塊路徑
app.use(async (ctx, next) => {
    if (ctx.type === 'application/javascript') {
        const contents = await stream2string(ctx.body);
        // 將body中導(dǎo)入的路徑修改一下，重新賦值給body返回給瀏覽器
        // import vue from 'vue', 匹配到from '修改為from '@modules/
        ctx.body = contents.replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/').replace(/process\.env\.NODE_ENV/g, '"development"');
    }
})

至此就實(shí)現(xiàn)了一個(gè)簡(jiǎn)版的vite，當(dāng)然這里我們只演示了.vue文件，對(duì)于css，less等其他資源都沒(méi)有處理，不過(guò)方法都是類似的，感興趣的同學(xué)可以自行實(shí)現(xiàn)。

#!/usr/bin/env node

const path = require('path')
const { Readable } = require('stream)
const Koa = require('koa')
const send = require('koa-send')
const compilerSFC = require('@vue/compiler-sfc')

const app = new Koa()

const stream2string = (stream) => {
    return new Promise((resolve, reject) => {
        const chunks = [];
        stream.on('data', chunk => {chunks.push(chunk)})
        stream.on('end', () => { resolve(Buffer.concat(chunks).toString('utf-8'))})
        stream.on('error', reject)
    })
}

const stringToStream = text => {
    const stream = new Readable();
    stream.push(text);
    stream.push(null);
    return stream;
}

// 加載第三方模塊
app.use(async (ctx, next) => {
    if (ctx.path.startsWith('/@modules/')) {
        // 截取模塊名稱
        const moduleName = ctx.path.substr(10);
        // 找到模塊路徑
        const pkgPath = path.join(process.pwd(), 'node_modules', moduleName, 'package.json');
        const pkg = require(pkgPath);
        // 重新給ctx.path賦值，需要重新設(shè)置一個(gè)存在的路徑，因?yàn)橹暗穆窂绞遣淮嬖诘?
        ctx.path = path.join('/node_modules', moduleName, pkg.module);
        // 執(zhí)行下一個(gè)中間件
        awiat next();
    }
})

// 開(kāi)啟靜態(tài)文件服務(wù)器
app.use(async (ctx, next) => {
    // 加載靜態(tài)文件
    await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html'})
    await next()
})

// 處理單文件組件
app.use(async (ctx, next) => {
    if (ctx.path.endsWith('.vue')) {
        // 獲取響應(yīng)文件內(nèi)容，轉(zhuǎn)換成字符串
        const contents = await streamToString(ctx.body);
        // 編譯文件內(nèi)容
        const { descriptor } = compilerSFC.parse(contents);
        // 定義狀態(tài)碼
        let code;
        // 不存在type就是第一次請(qǐng)求
        if (!ctx.query.type) {
            code = descriptor.script.content;
            // 這里的code格式是, 需要改造成我們前面貼出來(lái)的vite中的樣子
            // import Hello from './components/Hello.vue'
            // export default {
            //      name: 'App',
            //      components: {
            //          Hello
            //      }
            //  }
            // 改造code的格式，將export default 替換為const __script =
            code = code.relace(/export\s+default\s+/g, 'const __script = ')
            code += `
                import { render as __render } from '${ctx.path}?type=template'
                __script.rener = __render
                export default __script
            `
        } else if (ctx.query.type === 'template') {
            // 獲取編譯后的對(duì)象 code就是render函數(shù)
            const templateRender = compilerSFC.compileTemplate({ source: descriptor.template.content })
            // 將render函數(shù)賦值給code返回給瀏覽器
            code = templateRender.code
        }
        // 設(shè)置瀏覽器響應(yīng)頭為js
        ctx.type = 'application/javascript'
        // 將字符串轉(zhuǎn)換成數(shù)據(jù)流傳給下一個(gè)中間件。
        ctx.body = stringToStream(code);
    }
    await next()
})

// 修改第三方模塊路徑
app.use(async (ctx, next) => {
    if (ctx.type === 'application/javascript') {
        const contents = await stream2string(ctx.body);
        // 將body中導(dǎo)入的路徑修改一下，重新賦值給body返回給瀏覽器
        // import vue from 'vue', 匹配到from '修改為from '@modules/
        ctx.body = contents.replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/').replace(/process\.env\.NODE_ENV/g, '"development"');
    }
})

app.listen(5000)

console.log('服務(wù)器已經(jīng)啟動(dòng) http://localhost:5000')

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vite的原理分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!