依賴預(yù)構(gòu)建

• 模塊化兼容： 如開頭背景所寫，現(xiàn)仍共存多種模塊化標(biāo)準(zhǔn)代碼，Vite在預(yù)構(gòu)建階段將依賴中各種其他模塊化規(guī)范(CommonJS、UMD)轉(zhuǎn)換 成ESM，以提供給瀏覽器。
• 性能優(yōu)化： npm包中大量的ESM代碼，大量的import請求，會(huì)造成網(wǎng)絡(luò)擁塞。Vite使用esbuild，將有大量內(nèi)部模塊的ESM關(guān)系轉(zhuǎn)換成單個(gè)模塊，以減少 import模塊請求次數(shù)。

按需加載

• 服務(wù)器只在接受到import請求的時(shí)候，才會(huì)編譯對應(yīng)的文件，將ESM源碼返回給瀏覽器，實(shí)現(xiàn)真正的按需加載。

緩存

• HTTP緩存： 充分利用http緩存做優(yōu)化，依賴（不會(huì)變動(dòng)的代碼）部分用max-age,immutable 強(qiáng)緩存，源碼部分用304協(xié)商緩存，提升頁面打開速度。
• 文件系統(tǒng)緩存： Vite在預(yù)構(gòu)建階段，將構(gòu)建后的依賴緩存到node_modules/.vite ，相關(guān)配置更改時(shí)，或手動(dòng)控制時(shí)才會(huì)重新構(gòu)建，以提升預(yù)構(gòu)建速度。

重寫模塊路徑

瀏覽器import只能引入相對/絕對路徑，而開發(fā)代碼經(jīng)常使用npm包名直接引入node_module中的模塊，需要做路徑轉(zhuǎn)換后交給瀏覽器。

• es-module-lexer 掃描 import 語法
• magic-string 重寫模塊的引入路徑

// 開發(fā)代碼
import { createApp } from 'vue'

// 轉(zhuǎn)換后
import { createApp } from '/node_modules/vue/dist/vue.js'

源碼分析

與Webpack-dev-server類似Vite同樣使用WebSocket與客戶端建立連接，實(shí)現(xiàn)熱更新，源碼實(shí)現(xiàn)基本可分為兩部分，源碼位置在:

• vite/packages/vite/src/client client（用于客戶端）
• vite/packages/vite/src/node server（用于開發(fā)服務(wù)器）

client 代碼會(huì)在啟動(dòng)服務(wù)時(shí)注入到客戶端，用于客戶端對于WebSocket消息的處理（如更新頁面某個(gè)模塊、刷新頁面）；server 代碼是服務(wù)端邏輯，用于處理代碼的構(gòu)建與頁面模塊的請求。

簡單看了下源碼（[email protected]），核心功能主要是以下幾個(gè)方法（以下為源碼截取，部分邏輯做了刪減）：

1. 命令行啟動(dòng)服務(wù)npm run dev后，源碼執(zhí)行cli.ts，調(diào)用createServer方法，創(chuàng)建http服務(wù)，監(jiān)聽開發(fā)服務(wù)器端口。

// 源碼位置 vite/packages/vite/src/node/cli.ts
const { createServer } = await import('./server')
try {
    const server = await createServer({
        root,
        base: options.base,
        ...
    })
    if (!server.httpServer) {
        throw new Error('HTTP server not available')
    }
    await server.listen()
}

2. createServer方法的執(zhí)行做了很多工作，如整合配置項(xiàng)、創(chuàng)建http服務(wù)（早期通過koa創(chuàng)建）、創(chuàng)建WebSocket服務(wù)、創(chuàng)建源碼的文件監(jiān)聽、插件執(zhí)行、optimize優(yōu)化等。下面注釋中標(biāo)出。

// 源碼位置 vite/packages/vite/src/node/server/index.ts
export async function createServer(
    inlineConfig: InlineConfig = {}
): Promise<ViteDevServer> {
    // Vite 配置整合
    const config = await resolveConfig(inlineConfig, 'serve', 'development')
    const root = config.root
    const serverConfig = config.server

    // 創(chuàng)建http服務(wù)
    const httpServer = await resolveHttpServer(serverConfig, middlewares, httpsOptions)

    // 創(chuàng)建ws服務(wù)
    const ws = createWebSocketServer(httpServer, config, httpsOptions)

    // 創(chuàng)建watcher，設(shè)置代碼文件監(jiān)聽
    const watcher = chokidar.watch(path.resolve(root), {
        ignored: [
            '**/node_modules/**',
            '**/.git/**',
            ...(Array.isArray(ignored) ? ignored : [ignored])
        ],
        ...watchOptions
    }) as FSWatcher

    // 創(chuàng)建server對象
    const server: ViteDevServer = {
        config,
        middlewares,
        httpServer,
        watcher,
        ws,
        moduleGraph,
        listen,
        ...
    }

    // 文件監(jiān)聽變動(dòng)，websocket向前端通信
    watcher.on('change', async (file) => {
        ...
        handleHMRUpdate()
    })

    // 非常多的 middleware
    middlewares.use(...)
    
    // optimize
    const runOptimize = async () => {...}

    return server
}

3. 使用chokidar^[5]監(jiān)聽文件變化，綁定監(jiān)聽事件。

// 源碼位置 vite/packages/vite/src/node/server/index.ts
  const watcher = chokidar.watch(path.resolve(root), {
    ignored: [
      '**/node_modules/**',
      '**/.git/**',
      ...(Array.isArray(ignored) ? ignored : [ignored])
    ],
    ignoreInitial: true,
    ignorePermissionErrors: true,
    disableGlobbing: true,
    ...watchOptions
  }) as FSWatcher

4. 通過 ws^[6] 來創(chuàng)建WebSocket服務(wù)，用于監(jiān)聽到文件變化時(shí)觸發(fā)熱更新，向客戶端發(fā)送消息。

// 源碼位置 vite/packages/vite/src/node/server/ws.ts
export function createWebSocketServer(...){
    let wss: WebSocket
    const hmr = isObject(config.server.hmr) && config.server.hmr
    const wsServer = (hmr && hmr.server) || server

    if (wsServer) {
        wss = new WebSocket({ noServer: true })
        wsServer.on('upgrade', (req, socket, head) => {
            // 服務(wù)就緒
            if (req.headers['sec-websocket-protocol'] === HMR_HEADER) {
                wss.handleUpgrade(req, socket as Socket, head, (ws) => {
                    wss.emit('connection', ws, req)
                })
            }
        })
    } else {
        ...
    }
    // 服務(wù)準(zhǔn)備就緒，就能在瀏覽器控制臺(tái)看到熟悉的打印 [vite] connected.
    wss.on('connection', (socket) => {
        socket.send(JSON.stringify({ type: 'connected' }))
        ...
    })
    // 失敗
    wss.on('error', (e: Error & { code: string }) => {
        ...
    })
    // 返回ws對象
    return {
        on: wss.on.bind(wss),
        off: wss.off.bind(wss),
        // 向客戶端發(fā)送信息
        // 多個(gè)客戶端同時(shí)觸發(fā)
        send(payload: HMRPayload) {
            const stringified = JSON.stringify(payload)
            wss.clients.forEach((client) => {
                // readyState 1 means the connection is open
                client.send(stringified)
            })
        }
    }
}

5. 在服務(wù)啟動(dòng)時(shí)會(huì)向?yàn)g覽器注入代碼，用于處理客戶端接收到的WebSocket消息，如重新發(fā)起模塊請求、刷新頁面。

//源碼位置 vite/packages/vite/src/client/client.ts
async function handleMessage(payload: HMRPayload) {
  switch (payload.type) {
    case 'connected':
      console.log(`[vite] connected.`)
      break
    case 'update':
      notifyListeners('vite:beforeUpdate', payload)
      ...
      break
    case 'custom': {
      notifyListeners(payload.event as CustomEventName<any>, payload.data)
      ...
      break
    }
    case 'full-reload':
      notifyListeners('vite:beforeFullReload', payload)
      ...
      break
    case 'prune':
      notifyListeners('vite:beforePrune', payload)
      ...
      break
    case 'error': {
      notifyListeners('vite:error', payload)
      ...
      break
    }
    default: {
      const check: never = payload
      return check
    }
  }
}

優(yōu)勢

• 快！快！非?？欤?！
• 高度集成，開箱即用。
• 基于ESM急速熱更新，無需打包編譯。
• 基于esbuild的依賴預(yù)處理，比Webpack等node編寫的編譯器快幾個(gè)數(shù)量級。
• 兼容Rollup龐大的插件機(jī)制，插件開發(fā)更簡潔。
• 不與Vue綁定，支持React等其他框架，獨(dú)立的構(gòu)建工具。
• 內(nèi)置SSR支持。
• 天然支持TS。

不足

• Vue仍為第一優(yōu)先支持，量身定做的編譯插件，對React的支持不如Vue強(qiáng)大。
• 雖然已經(jīng)推出2.0正式版，已經(jīng)可以用于正式線上生產(chǎn)，但目前市場上實(shí)踐少。
• 生產(chǎn)環(huán)境集成Rollup打包，與開發(fā)環(huán)境最終執(zhí)行的代碼不一致。

與 webpack 對比

由于Vite主打的是開發(fā)環(huán)境的極致體驗(yàn)，生產(chǎn)環(huán)境集成Rollup，這里的對比主要是Webpack-dev-server與Vite-dev-server的對比：

• 到目前很長時(shí)間以來Webpack在前端工程領(lǐng)域占統(tǒng)治地位，Vite推出以來備受關(guān)注，社區(qū)活躍，GitHub star 數(shù)量激增，目前達(dá)到37.4K
• Webpack配置豐富使用極為靈活但上手成本高，Vite開箱即用配置高度集成
• Webpack啟動(dòng)服務(wù)需打包構(gòu)建，速度慢，Vite免編譯可秒開
• Webpack熱更新需打包構(gòu)建，速度慢，Vite毫秒響應(yīng)
• Webpack成熟穩(wěn)定、資源豐富、大量實(shí)踐案例，Vite實(shí)踐較少
• Vite使用esbuild編譯，構(gòu)建速度比webpack快幾個(gè)數(shù)量級

兼容性

• 默認(rèn)目標(biāo)瀏覽器是在script標(biāo)簽上支持原生 ESM 和 原生 ESM 動(dòng)態(tài)導(dǎo)入
• 可使用官方插件 @vitejs/plugin-legacy，轉(zhuǎn)義成傳統(tǒng)版本和相對應(yīng)的polyfill

未來探索

• 傳統(tǒng)構(gòu)建工具性能已到瓶頸，主打開發(fā)體驗(yàn)的Vite，可能會(huì)受到歡迎。
• 主流瀏覽器基本支持ESM，ESM將成為主流。
• Vite在Vue3.0代替vue-cli，作為官方腳手架，會(huì)大大提高使用量。
• Vite2.0推出后，已可以在實(shí)際項(xiàng)目中使用Vite。
• 如果覺得直接使用Vite太冒險(xiǎn)，又確實(shí)有dev server速度慢的問題需要解決，可以嘗試用Vite單獨(dú)搭建一套dev server

相關(guān)資源

官方插件

除了支持現(xiàn)有的Rollup插件系統(tǒng)外，官方提供了四個(gè)最關(guān)鍵的插件

• @vitejs/plugin-vue 提供 Vue3 單文件組件支持
• @vitejs/plugin-vue-jsx  提供 Vue3 JSX 支持（專用的 Babel 轉(zhuǎn)換插件）
• @vitejs/plugin-react 提供完整的 React 支持
• @vitejs/plugin-legacy 為打包后的文件提供傳統(tǒng)瀏覽器兼容性支持

UI組件庫

• Element UI^[7]：支持 vite 引入

相關(guān)鏈接

• Vite官網(wǎng)^[8]
• Vue3 生態(tài)進(jìn)展和計(jì)劃-尤雨溪^[9]
• Vite源碼解析^[10]
• Develop with Vite | Vite快速入門 - Anthony Fu ? Vue北京聚會(huì) Day 13^[11]

     

      

       

        

         
        
        

         Node 社群
         

        
       
      
      

       

        

         

          

         
         

          

         
        
       
      
      


      
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
      


      

      


      
如果你覺得這篇內(nèi)容對你有幫助，我想請你幫我2個(gè)小忙：

      

       1. 點(diǎn)個(gè)「在看」，讓更多人也能看到這篇文章
      
      

       2. 訂閱官方博客 www.inode.club 讓我們一起成長
      
      

       

      
     
點(diǎn)贊和在看就是最大的支持??

參考資料