来了来了，最新vite源码分析，vite到底为什么比webpack快

Posted 2021-03-30 进阶的前端萤火虫

vite源码

vite执行流程

初始化

当我们执行vite serve命令的时候，vite会在项目启动的时候访问/bin/vite.js文件

vite.js文件代码如下：

require('../dist/node/cli')

他实际上访问的是node下的cli文件，我们可以直接进入相对应的cli文件，该文件位于 /src/node/cli.ts下，我们可以直接打开这个文件，内部用了一个立即执行函数，具体代码看下面

// /src/node/cli.ts
;(async () => {
    // 主要代码如下
    const envMode = mode || m || defaultMode
    // resolveOptions函数 主要拿到vite的配置
    // 这里可以理解成webpack的一些初始化配置
    const options = await resolveOptions(envMode)
    process.env.NODE_ENV = process.env.NODE_ENV || envMode
    // 接下来根据我们输入的键或者默认走serve
    if (!options.command || options.command === 'serve') {
        runServe(options)
    } else if (options.command === 'build') {
        runBuild(options)
    } else if (options.command === 'optimize') {
        runOptimize(options)
    } else {
        console.error(chalk.red(`unknown command: ${options.command}`))
        process.exit(1)
    }
})

从上面的代码，我们可以看到，我们在日常的开发过程中，主要走的是runServe()函数，接下来，我们来看runServe具体做了什么内容

runServe函数的处理

function runServe() {
    // 创建一个server服务
    const server = require('./server').createServer(options)
    // 启动一个node进程
    let port = options.port || 3000
    let hostname = options.hostname || 'localhost'
    const protocol = options.https ? 'https' : 'http'
    // 启动错误处理
    server.on('error', (e: Error & { code?: string }) => {})
    // 启动成功处理
    server.listen(port, () => {})
}

runServe函数最重要的就是创建一个server服务，这里也是npm run serve的核心在server.js内部的方法里

server.js文件

该文件位于 /src/node/server/index.ts主要代码如下显示处理，这里的主要逻辑处理

• 创建 koa服务
• 创建 websocket链接
• 监听根目录下的文件

export function createServer(config) {
    // 创建一个server服务
    const app = new Koa<State, Context>()
    const server = resolveServer(config, app.callback())
    // 调用chokidar对文件进行递归监听，并排除node模块和.git目录
    // chokidar链接: https://www.npmjs.com/package/chokidar
    const watcher = chokidar.watch(root, {
    ignored: [/node_modules/, /\.git/],
    awaitWriteFinish: {
      stabilityThreshold: 100,
      pollInterval: 10
    }
    // createResolver
    // 处理alias别名的应用
    // 对已请求的文件或者请求进行缓存
    const resolver = createResolver(root, resolvers, alias, assetsInclude)
    
    // 将服务器信息绑定到koa的context内
    app.use((ctx, next) => {
      Object.assign(ctx, context)
      ctx.read = cachedRead.bind(null, ctx)
      return next()
    })
}

加载koa中间件

将所有的路由中间件放到resolvedPlugins数组，再依次遍历执行内部的中间件操作

const resolvedPlugins = [
    // somecode
]
resolvedPlugins.forEach((m) => m && m(context))

serverPluginHmr中间件

在执行npm run serve的时候，vite 会在内部启动一个websocket服务并构建一个send方法，用来与客户端的hmr通信，内部对非.vue和样式文件做了文件变动更新，部分核心代码如下

const wss = new WebSocket.Server({ noServer: true })
server.on('upgrade', (req, socket, head) => {
    if (req.headers['sec-websocket-protocol'] === 'vite-hmr') {
        wss.handleUpgrade(req, socket, head, (ws) => {
            wss.emit('connection', ws, req)
        })
    }
})
// 通知客户端文件，什么文件已改动，需要重新请求文件
const send = (watcher.send = (payload: HMRPayload) => {
    const stringified = JSON.stringify(payload, null, 2)
    debugHmr(`update: ${stringified}`)
    // 依次派发多个客户端事件
    wss.clients.forEach((client) => {
        if (client.readyState === WebSocket.OPEN) {
            client.send(stringified)
        }
    })
})
const handleJSReload = (watcher.handleJSReload = (
    filePath: string,
    timestamp: number = Date.now()
    ) => {
        //...somecode
    }
)
// somecode
watcher.on('change', (file) => {
    if (!(file.endsWith('.vue') || isCSSRequest(file))) {
      handleJSReload(file)
    }
})

serverPluginhtml中间件

serverPluginHtml中间件，内部方法rewriteHtml在浏览器进行访问的时候进行index.htm文件的重写。访问public/index.html文件的时候，会进入到koa拦截，并在head的第一个子标签加入<script type="module">import "/vite/client"</script>文件，实现热刷新HMR，并在内部开启一个.html文件的监听，如果.html文件被改动，则会调用send方法，并发送类型为full-reload数据与给客户端

app.use(async (ctx, next) => {
    await next()
    
    if (ctx.status === 304) {
        return
    }
    // 拿到.html文件，并重写当前文件，重写html脚本，加入client-hmr文件，并将当前读取到的脚本进行缓存
    // 缓存的原因，每次文件请求都会经过koa多次，这样可以减少操作
    if (ctx.response.is('html') && ctx.body) {
        const importer = ctx.path
        // 读取文件
        const html = await readBody(ctx.body)
        if (rewriteHtmlPluginCache.has(html)) {
            debug(`${ctx.path}: serving from cache`)
            ctx.body = rewriteHtmlPluginCache.get(html)
        } else {
            if (!html) return
            ctx.body = await rewriteHtml(importer, html)
            rewriteHtmlPluginCache.set(html, ctx.body)
        }
        return
    }
})

// 监听.html文件
watcher.on('change', (file) => {
    const path = resolver.fileToRequest(file)
    if (path.endsWith('.html')) {
        watcher.send({
            type: 'full-reload',
            path
        })
    }
})

serverPluginVue中间件

serverPluginVue这个中间件应该是重点中的重点了，遇到.vue的文件且没有带type方法

文件位于：/src/server/serverPluginVue,当浏览器打开，请求到以.vue结尾的文件，会先进入这个中间针对.vue会先做一层处理，将每一个.vue文件重写成.js文件写入html中，会遵循以下格式处理：

<template></template>语法转换成import { render as __render } from "/App.vue?type=template"

<style></style> 语法转换成import "/App.vue?type=style&index=0"

代码如下:

// ...code
// 处理单个vue文件，拿到转义后可执行的对象数据
const descriptor = await parseSFC(root, filePath, ctx.body)
// 如果不存在query.type则默认为第一次加载vue文件
// 执行 if (!query.type) 逻辑

// 提取编译后的vue文件数据，函数内部做了一系列的
// import 处理，例如我们上面所说的
const { code, map } = await compileSFCMain(
    descriptor,
    filePath,
    publicPath,
    root
)
ctx.body = code
ctx.map = map
// etagCacheCheck函数一次浏览url缓存，并修改status状态
return etagCacheCheck(ctx)

compileSFCMain主要用来将我们单页面组件，编译成浏览器识别的文件，

以App.vue为栗子：

<template>
  <h1>Vite Playground</h1>
</template>

<script>
const App = {}
export { App as default }
</script>


<style scoped lang='scss'>
body {
  background: #f5f5f5;
}
</style>

转换成

const App = {}
export {  }

const __script = App
import "/App.vue?type=style&index=0"
__script.__scopeId = "data-v-c44b8200"
import { render as __render } from "/App.vue?type=template"
__script.render = __render
__script.__hmrId = "/App.vue"
typeof __VUE_HMR_RUNTIME__ !== 'undefined' && __VUE_HMR_RUNTIME__.createRecord(__script.__hmrId, __script)
__script.__file = "E:\\work\\vite\\playground\\App.vue"
export default __script

以上被解析后.vue文件，遇到import会再一次发起请求，比如加载/App.vue?type=style文件，会再一次进入到serverPluginVue.js文件，根据ctx.query进入styles解析条件

if (query.type === 'style') {
    // 拿到相对应的style对象
    const index = Number(query.index)
    const styleBlock = descriptor.styles[index]
    // 解决style路径引用，让浏览器能识别
    if (styleBlock.src) {
        filePath = await resolveSrcImport(root, styleBlock, ctx, resolver)
    }
    // 第一个style-hash-id 唯一识别
    const id = hash_sum(publicPath)
    // 拿到style文件编译后的结果
    const result = await compileSFCStyle(
        root,
        styleBlock,
        index,
        filePath,
        publicPath,
        config
    )
    ctx.type = 'js'
    // 调用客户端client, updateStyle方法，追加style样式
    ctx.body = codegenCss(`${id}-${index}`, result.code, result.modules)
    // 标记将读取过的文件进行缓存
    return etagCacheCheck(ctx)
}

相对应的type=template也会进入template解析

if (query.type === 'template') {
    // 拿到template块
    const templateBlock = descriptor.template!
    if (templateBlock.src) {
        filePath = await resolveSrcImport(root, templateBlock, ctx, resolver)
    }
    // 拿到vue所对应的node_module地址路径
    const cached = vueCache.get(filePath)
    const bindingMetadata = cached && cached.script && cached.script.bindings
    const vueSpecifier = resolveBareModuleRequest(
        root,
        'vue',
        publicPath,
        resolver
    )
    // 将template语法转换成jsx语法丢回浏览器
    // 让浏览器可以识别并加载出相对应的Dom节点
    const { code, map } = compileSFCTemplate
    // 返回浏览器
    ctx.body = code
    ctx.map = map
    // 标记将读取过的文件进行缓存
    return etagCacheCheck(ctx)
}

compileSFCTemplate、parseSFC、compileSFCTemplate、compileSFCStyle编译方法都会讲当前读取的path路径，写入缓存，例如：compileSFCTemplate方法

function compileSFCTemplate() {
    // ...somecode
    // 将当前路径做一次map映射，缓存文件
    vueCache.set(filePath, cached)
}

handleVueReload方法用来处理.vue文件变动后的回调，然后根据缓存的数据和当前内容做一次数据匹配，判断文件哪块内容变动，在调用send方法通知客户端，客户端根据不同的类型重新发起请求，读取改动后的文件内容

const handleVueReload = (watcher.handleVueReload = async ()=>{
    // 获取请求路径
    const publicPath = resolver.fileToRequest(filePath)
    // 读取缓存文件
    const cacheEntry = vueCache.get(filePath)
    // 调用send方法
    const { send } = watcher
    
    // somecode
    
    // script部分更新，重新渲染vue
    if (
      !isEqualBlock(descriptor.script, prevDescriptor.script) ||
      !isEqualBlock(descriptor.scriptSetup, prevDescriptor.scriptSetup)
    ) {
      return sendReload()
    }
    
    // template部分更新
    if (!isEqualBlock(descriptor.template, prevDescriptor.template)) {
        // 如果script部分没变，直接需要缓存的script就行
        // 解决数据绑定解析的问题
        if (prevDescriptor.scriptSetup && descriptor.scriptSetup) {
            vueCache.get(filePath)!.script = cacheEntry!.script
        }
        // 标记需要重新渲染vue
        needRerender = true
    }
    // 针对于css-module的变化，则需要全量刷新
    // 因为内部$style已变更
    if (
      prevStyles.some((s) => s.module != null) ||
      nextStyles.some((s) => s.module != null)
    ) {
      return sendReload()
    }
    // styls的全局变量改动也需要重新渲染vue 
    if (
      prevStyles.some((s, i) => {
        const next = nextStyles[i]
        if (s.attrs.vars && (!next || next.attrs.vars !== s.attrs.vars)) {
          return true
        }
      })
    ) {
      return sendReload()
    }
    
    // scoped变动也需要重新渲染
    if (prevStyles.some((s) => s.scoped) !== nextStyles.some((s) => s.scoped)) {
      return sendReload()
    }
    
    // 遍历新的vue文件内部的style
    // 匹配每一个数据，如果开动则重新请求style
    nextStyles.forEach((_, i) => {
      if (!prevStyles[i] || !isEqualBlock(prevStyles[i], nextStyles[i])) {
        didUpdateStyle = true
        const path = `${publicPath}?type=style&index=${i}`
        send({
          type: 'style-update',
          path,
          changeSrcPath: path,
          timestamp
        })
      }
    })
    
    // 如果当前style长度与缓存不匹配，则删除style
    prevStyles.slice(nextStyles.length).forEach((_, i) => {
      didUpdateStyle = true
      send({
        type: 'style-remove',
        path: publicPath,
        id: `${styleId}-${i + nextStyles.length}`
      })
    })
    const prevCustoms = prevDescriptor.customBlocks || []
    const nextCustoms = descriptor.customBlocks || []
    //自定义块内容变化，也需要重新渲染vue
    if (
      nextCustoms.some(
        (_, i) =>
          !prevCustoms[i] || !isEqualBlock(prevCustoms[i], nextCustoms[i])
      )
    ) {
      return sendReload()
    }
    
    // template语法变动，渲染template组件
    if (needRerender) {
      send({
        type: 'vue-rerender',
        path: publicPath,
        changeSrcPath: publicPath,
        timestamp
      })
    }
    
})

serverPluginClient中间件

文件位于：/src/server/serverPluginClient中，该中间件主要处理客户端与服务端链接websocket通信，直接读取了/src/client/client.js文件并以text的形式返回给客户端，客户端直接加载websocket

// 提取其中重要代码
const socketProtocol =
  __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
// ...code
socket.addEventListener('message', async ({ data }) => {
  // 监听服务器的message信息，根据不同类型就行数据热更新
  const payload = JSON.parse(data)
  if (payload.type === 'multi') {
    payload.updates.forEach(handleMessage)
  } else {
    // 处理文件热更新方法
    handleMessage(payload)
  }
})

handleMessage方法作用是，通过nodejs模块chokidar对文件进行相对应的监听变动，该函数也是响应客户端文件变动的重要方法，也会重点分析

async function handleMessage(payload) {
  const { path, changeSrcPath, timestamp } = payload
  switch (payload.type) {
    // 链接
    case 'connected': ''; break;
    // vue文件script部分更新
    case 'vue-reload': '';
        // 重新请求vue文件
        import(`${path}?t=${timestamp}`)
        break;
    // vue文件template部分更新
    case 'vue-rerender': 
        // 请求vue.template部分
        import(`${templatePath}&t=${timestamp}`)
        break;
    // style样式更新
    case 'style-update': 
        // 请求vue.style部分
        // 这里做了一次如果当前路径存在则直接修改
        // 不需要添加dom标签
        const el = document.querySelector(`link[href*='${path}']`)
        if (el) {
            el.setAttribute(
              'href',
              `${path}${path.includes('?') ? '&' : '?'}t=${timestamp}`
            )
            break
        }
        // 如果没有则加载
        const importQuery = path.includes('?') ? '&import' : '?import'
        await import(`${path}${importQuery}&t=${timestamp}`)
        break;
    // style移除更新
    case 'style-remove': 
        // 直接移除style
        removeStyle(payload.id) 
        break;
    // js文件更新
    case 'js-update': ''; break;
    case 'custom': ''; break;
    // 修改html则重新刷新页面
    case 'full-reload': ''; break;
  }
}

serverPluginModuleRewrite 与 serverPluginModuleResolve

内部有个rewriteImports方法，主要作用就是我们在项目中引入的模块做替换， 如：

import test from './test.js'
import vue from 'vue'

代码会转换如下

import test from './test.js'
import vue from '/@modules/vue/dist/vue.runtime.esm-bundler.js'

相比较下来，我们能看到，如果引入的是属于node_modules包，vite会自动转为/@modules/xxx来识别我们的npm包

然后会进入serverPluginModuleResolve下的moduleResolvePlugin方法，该方法用来解决/@modules开头的依赖，内部serve方法是最后得到的本路径，然后读取并返回

首次会进入

// resolveNodeModuleFile方法会标记换粗，并返回当前模块被解析到的本地路径
// 例如： '/@modules/vue/dist/vue.runtime.esm-bundler.js'
// 以下为我个人项目盘符
// 转为换： 'E:\\work\\vite\\node_modules\\vue\\dist\\vue.runtime.esm-bundler.js'
const nodeModuleFilePath = resolveNodeModuleFile(importerFilePath, id)
if (nodeModuleFilePath) {
  return serve(id, nodeModuleFilePath, 'node_modules')
}
// serve 做一次文件缓存，并读取文件，进入下一个中间件
const serve = async (id: string, file: string, type: string) => {
  moduleIdToFileMap.set(id, file)
  moduleFileToIdMap.set(file, ctx.path)
  debug(`(${type}) ${id} -> ${getDebugPath(root, file)}`)
  // ctx.read方法就是我们在一开始初始化的地方
  // ctx.read = cachedRead.bind(null, ctx)
  await ctx.read(file)
  return next()
}

cachedRead方法位于/src/node/utils/fsUtils.js

用于缓存已经读取过的文件，设置读取文件类型，给ctx.body追加信息

export async function cachedRead() {
    // 读取文件修改时间
    const lastModified = fs.statSync(file).mtimeMs
    // 读取缓存
    const cached = fsReadCache.get(file)
    
    // 设置请求信息
    if (ctx) {
        ctx.set('Cache-Control', 'no-cache')
        ctx.type = mime.lookup(path.extname(file)) || 'application/octet-stream'
    }
    // 如果有缓存，且未修改
    if (cached && cached.lastModified === lastModified) {
        // 执行代码逻辑
    }
    // 读取文件
    let content = await fs.readFile(file)
    // map处理
    if (file.endsWith('.map')) {
        // ...code
    }
    // 设置请求信息以及返回体信息
    if (ctx) {
        ctx.etag = etag
        ctx.lastModified = new Date(lastModified)
        ctx.body = content
        ctx.status = 200
        const { root, watcher } = ctx
        
        // 如果文件不在root下，则需要单独执行监听
        watchFileIfOutOfRoot(watcher, root, file)
    }
}

当我们完成了ctx.read方法后，代码中的await next()会进入下一个中间件moduleRewritePlugin的moduleRewritePlugin方法

省略部分代码，提取重要代码

if(...) {
    // 读取moduleResolvePlugin方法，read读取文本后的content
    const content = await readBody(ctx.body)
    // somecode
    // 解决import的路径
    // 这里才是实际返回浏览器内容的数据
    ctx.body = rewriteImports(
      root,
      content!,
      importer,
      resolver,
      ctx.query.t
    )
}

vite源码大概到这里就分析结束了，基本上它就是一个冷启动，根据需要用到的文件进行按需加载，大大加快了构建速度，通过监听文件改动，对比修改块内容，实现按需构建，对比webpack这里，确实加快了热刷新编译，不得不说尤大的很多想法和设计确实值得我学习。。哈哈哈！！！

我是godlike，每周一篇小技巧，一起快速入坑，希望能在前端道路上，和你努力，一起共勉！