vue-vite浅析

区块链轻节点:“身”轻,责任重

大家好,我是小雨小雨,致力于分享有趣的、实用的文章。

内容分为原创和翻译,如果有问题,欢迎随时评论或私信,很乐意和大家一起探讨,一起进步。

分享不易,希望能够得到大家的支持和关注。

vite出了好久了,也出了好多相关文章,我也想出,然后我就写了。

该文档对应的vite版本:2.0.0-beta.4
vite文档

整体流程

笔者认为,vite是站在巨人肩膀上的一个创新型dev构建工具,分别继承于:

其中洋葱模型如果将next()放到函数最底部的话,和rollup的插件驱动是类似的。

也就是说可插拔架构是vite的整体思想,不仅可以编写内部插件,将内部插件原子化,还可以借助npm上各种已有的插件。非常灵活。

为什么采用es module呢?

vite采用的es module进行模块导入,这是现代浏览器原生支持的,当import一个模块时,会发出一个请求,正因如此,只能在服务中使用es module。而且import的模块路径发生变化的时候,会重新发送请求,路径变化包括query。

下面我们进入整体

vite采用monorepo架构,我们要关心的代码主要两部分:

先从vite cli说起。

这里是vite的入口:

const { createServer } = await import('./server')
try {
  const server = await createServer(
    {
      root,
      mode: options.mode,
      logLevel: options.logLevel,
      server: cleanOptions(options) as ServerOptions
    },
    options.config
  )
  await server.listen()

简单粗暴,通过createServer创建一个服务,然后开始监听,我们直接一个瞎子摸葫芦,打开createServer看看。

export async function createServer(
  inlineConfig: UserConfig & { mode?: string } = {},
  configPath?: string | false
): Promise<ViteDevServer> {
  // 代码太多不放了,放点方便看的,有兴趣的话可以打开代码一边看这里的注释一边看代码
  
  // 配置相关,比如记载本地配置文件、集成插件,环境变量等等

  // 利用connect初始化服务,connect是一个使用中间件为node提供可扩展服务的http框架,有兴趣可以去看看

  // 创建webSocket服务

  // 利用chokidar进行文件监听
  
  // vite继承rollup实现了一个迷你版的构解析构建工具
  
  // 创建一个图来维护模块之间的关系
  
  // 当文件发生变化的时候进行hmr相关操作,后续会介绍
  
  // 接入各种各样的中间件,比如接口代理的、静态服务的、解析请求资源的、重定向、处理html的等,其中最重要的就是解析请求资源的了,下面具体来扣一下这块 
  
  // 调用插件中的configureServer,这一步可以将vite中所有内容暴露给用户,比如node服务app,配置,文件监听器,socket等等,很大胆,很坏,但是我好喜欢
  
  // 返回node服务,供listen
}

运行完这一堆后,我们就启动了一个服务,我们发现,vite到目前为止,并没有任何关于打包的代码,那他快在哪里呢?

其实没有打包就是vite快的原因之一,而他的打包做到了真正的按需。

启动服务后,我们访问页面会发送一个个的请求,这些请求会经过中间件处理,而中间件,就会进行打包,注入等相关操作。

核心内容其实就是上面注释中写的解析请求资源这个中间件,vite中叫做transformMiddleware

export function transformMiddleware(
  server: ViteDevServer
): Connect.NextHandleFunction {
  const {
    config: { root, logger },
    moduleGraph
  } = server

  return async (req, res, next) => {
      // 其他代码
      
      // Only apply the transform pipeline to:
      // - requests that initiate from ESM imports (any extension)
      // - CSS (even not from ESM)
      // - Source maps (only for resolving)
      if (
        isJSRequest(url) || // 指定的(j|t)sx?|mjs|vue这类文件,或者没有后缀
        isImportRequest(url) || // import来的
        isCSSRequest(url) || // css
        isHTMLProxy(url) || // html-proxy
        server.config.transformInclude(withoutQuery) // 命中需要解析的
      ) {
        // 移除import的query,例: (\?|$)import=xxxx
        url = removeImportQuery(url)

        // 删调idprefix,importAnalysis生成的不合法的浏览器说明符被预先解析id
        if (url.startsWith(VALID_ID_PREFIX)) {
          url = url.slice(VALID_ID_PREFIX.length)
        }

        // for CSS, we need to differentiate between normal CSS requests and
        // imports
        // 处理css链接
        if (isCSSRequest(url) && req.headers.accept?.includes('text/css')) {
          url = injectQuery(url, 'direct')
        }

        // check if we can return 304 early
        const ifNoneMatch = req.headers['if-none-match']
        // 命中浏览器缓存,利用浏览器的特性
        if (
          ifNoneMatch &&
          (await moduleGraph.getModuleByUrl(url))?.transformResult?.etag ===
            ifNoneMatch
        ) {
          res.statusCode = 304
          return res.end()
        }

        // 解析vue js css 等文件的关键
        const result = await transformRequest(url, server)
        if (result) {
          const type = isDirectCSSRequest(url) ? 'css' : 'js'
          const isDep =
            DEP_VERSION_RE.test(url) ||
            url.includes(`node_modules/${DEP_CACHE_DIR}`)
          return send(
            req,
            res,
            result.code,
            type,
            result.etag,
            // allow browser to cache npm deps!
            isDep ? 'max-age=31536000,immutable' : 'no-cache',
            result.map
          )
        }
      }
    } catch (e) {
      return next(e)
    }

    next()
  }
}

其中最重要的是transformRequest,该方法进行了缓存,请求资源解析,加载,转换操作。

export async function transformRequest(
  url: string,
  { config: { root }, pluginContainer, moduleGraph, watcher }: ViteDevServer
): Promise<TransformResult | null> {
  url = removeTimestampQuery(url)
  const prettyUrl = isDebug ? prettifyUrl(url, root) : ''

  // 检查上一次的transformResult,这个东西会在hmr中被主动移除掉
  const cached = (await moduleGraph.getModuleByUrl(url))?.transformResult
  if (cached) {
    isDebug && debugCache(`[memory] ${prettyUrl}`)
    return cached
  }

  // resolve
  const id = (await pluginContainer.resolveId(url))?.id || url
  const file = cleanUrl(id)

  let code = null
  let map: SourceDescription['map'] = null

  // load
  const loadStart = Date.now()
  const loadResult = await pluginContainer.load(id)
  // 加载失败,直接读文件
  if (loadResult == null) {
    // try fallback loading it from fs as string
    // if the file is a binary, there should be a plugin that already loaded it
    // as string
    try {
      code = await fs.readFile(file, 'utf-8')
      isDebug && debugLoad(`${timeFrom(loadStart)} [fs] ${prettyUrl}`)
    } catch (e) {
      if (e.code !== 'ENOENT') {
        throw e
      }
    }
    if (code) {
      map = (
        convertSourceMap.fromSource(code) ||
        convertSourceMap.fromMapFileSource(code, path.dirname(file))
      )?.toObject()
    }
  } else {
    isDebug && debugLoad(`${timeFrom(loadStart)} [plugin] ${prettyUrl}`)
    if (typeof loadResult === 'object') {
      code = loadResult.code
      map = loadResult.map
    } else {
      code = loadResult
    }
  }
  if (code == null) {
    throw new Error(`Failed to load url ${url}. Does the file exist?`)
  }

  // 将当前处理请求地址添加到维护的图中
  const mod = await moduleGraph.ensureEntryFromUrl(url)
  // 监听
  if (mod.file && !mod.file.startsWith(root + '/')) {
    watcher.add(mod.file)
  }

  // transform
  const transformStart = Date.now()
  // 所有的插件都被闭包保存了,然后调用pluginContainer上的某个钩子函数,该函数会loop插件进行具体操作
  const transformResult = await pluginContainer.transform(code, id, map)
  if (
    transformResult == null ||
    (typeof transformResult === 'object' && transformResult.code == null)
  ) {
    // no transform applied, keep code as-is
    isDebug &&
      debugTransform(
        timeFrom(transformStart) + chalk.dim(` [skipped] ${prettyUrl}`)
      )
  } else {
    isDebug && debugTransform(`${timeFrom(transformStart)} ${prettyUrl}`)
    if (typeof transformResult === 'object') {
      code = transformResult.code!
      map = transformResult.map
    } else {
      code = transformResult
    }
  }

  // 返回并缓存当前转换结果
  return (mod.transformResult = {
    code,
    map,
    etag: getEtag(code, { weak: true })
  } as TransformResult)
}

主要涉及插件提供的三个钩子函数:

  • pluginContainer.resolveId
  • pluginContainer.load
  • pluginContainer.transform

resolveIdload将请求的url解析成对应文件中的内容供transform使用

transform会调用插件提供的transform方法对不同文件代码进行转换操作,比如vite提供的plugin-vue,就对vue进行了转换,提供的plugin-vue-jsx,就对jsx写法进行了支持。如果要支持其他框架语言,也可以自行添加。

到这里,vite的大致流程就结束了。

可能光看代码不是很直观,这边提供一个简单的例子:

Rancher首席架构师解读Fleet:它何以管理百万集群?

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Vite App</title>
</head>

<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>

</html>
// main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
// app.vue
<template>
    <div>hello world</div>
</template>

浏览器中看到的app.vue中的内容是这样的:

除了render相关函数,还有createHotContext、import.meta.hot.accept这类内容,这是和hmr相关的,下面会讲到。

hmr

hmr在我们的开发工程中也提到举足轻重的作用,那vite是怎么做的呢?

涉及部分:

  • client提供hmr上下文环境,其中包含当前文件对应的更新方法,ws通知时会调用

  • importsAnalysisimport模块的时候对模块进行图依赖更新、拼接等操作,比如针对hmr模块注入client中提供的hmr api

  • plugin-vue注入vue上下文环境,并且将client中的方法拼接到当前模块中

当我们import一个模块时,会发送一个请求,当前请求在transformMiddleware中间件处理的时候,当前请求url会被添加到图中,然后被各种插件的transform处理,其中就包括importsAnalysis插件,importsAnalysis会通过es-module-lexer解析import的export,将当前模块插入到模块图中,并且将当前importe和被引入的importedModules建立依赖关系。

// importsAnalysis.ts
if (!isCSSRequest(importer)) {
    const prunedImports = await moduleGraph.updateModuleInfo(
      importerModule, // 当前解析的主体
      importedUrls, // 被引入的文件
      normalizedAcceptedUrls,
      isSelfAccepting
    )
    if (hasHMR && prunedImports) {
      handlePrunedModules(prunedImports, server)
    }
}

并且会为当前请求的文件中加入hmr api。

// importsAnalysis.ts
if (hasHMR) {
    // inject hot context
    str().prepend(
      `import { createHotContext } from "${CLIENT_PUBLIC_PATH}";` +
        `import.meta.hot = createHotContext(${JSON.stringify(
          importerModule.url
        )});`
    )
  }

除了importsAnalysis插件外,还有plugin-vue插件的transform,插入的是re-render方法。

// /plugin-vue/src/main.ts
if (devServer && !isProduction) {
    output.push(`_sfc_main.__hmrId = ${JSON.stringify(descriptor.id)}`)
    output.push(
      `__VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main)`
    )
    // check if the template is the only thing that changed
    if (prevDescriptor && isOnlyTemplateChanged(prevDescriptor, descriptor)) {
      output.push(`export const _rerender_only = true`)
    }
    output.push(
      `import.meta.hot.accept(({ default: updated, _rerender_only }) => {`,
      `  if (_rerender_only) {`,
      `    __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render)`,
      `  } else {`,
      `    __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated)`,
      `  }`,
      `})`
    )
}

其中__VUE_HMR_RUNTIME__为vue runtime暴露的,已经在main.js中引入过了,下面的import.meta.hot.accept则是client暴露的方法,import.meta为es module当前模块的元数据。

而client就是浏览器端hmr相关的逻辑了,也是上面插件注入的方法的依赖。

// client.ts
function acceptDeps(deps: string[], callback: HotCallback['fn'] = () => {}) {
    // hotModulesMap被闭包保存了
    // ownerPath是当importsAnalysis实例化hmr上下文的时候传入的当前模块的id地址
    const mod: HotModule = hotModulesMap.get(ownerPath) || {
      id: ownerPath,
      callbacks: []
    }
    mod.callbacks.push({
      deps,
      fn: callback
    })
    hotModulesMap.set(ownerPath, mod)
  }
  // 通过importsAnalysis添加在文件中
  // plugin-vue插件会使用该方法添加模块(mod),并且会添加一些vue相关的内容,比如:
  // 添加vue render方法,以供hmr调用
const hot = {
    // 调用的时候给callback增加刷新方法
    accept(deps: any, callback?: any) {
      if (typeof deps === 'function' || !deps) {
        // self-accept: hot.accept(() => {})
        acceptDeps([ownerPath], ([mod]) => deps && deps(mod))
      } else if (typeof deps === 'string') {
        // explicit deps
        acceptDeps([deps], ([mod]) => callback && callback(mod))
      } else if (Array.isArray(deps)) {
        acceptDeps(deps, callback)
      } else {
        throw new Error(`invalid hot.accept() usage.`)
      }
    },
    // ...
}

我们调用import.meta.hot.accept的时候,比如传入方法,那么会以importer模块为key将更新方法添加到一个hotModulesMap中。记录当前待更新模块。

接下来,ws会在在文件变化后发送message到浏览器端。这一步会涉及判断是否为自更新、(主要是根据accept方法主体内容判断,具体逻辑可自行查看)是否有importer等逻辑决定hmr类型。

我们以hmr类型为js-update为例子继续往下说。

主要是两个方法,一个是fetchUpdate,用来获取即将更新的模块,import模块,返回一个调用re-render的方法,一个是queueUpdate,用于执行fetchUpdate返回的方法。

进入fetchUpdate后,会判断是否更新的是当前模块,是的话添加当前模块到modulesToUpdate,不是的话将依赖的子模块添加到待更新的记录中modulesToUpdate,之后过滤出之前收集的待更新的模块,循环进行import操作,但是会在import模块的路径上加上当前时间戳,以强制触发http请求,用引入的新模块替换之前的旧模块,最后返回plugin-vue提供的re-render方法。

async function fetchUpdate({ path, acceptedPath, timestamp }: Update) {
  // 当前更新的模块
  const mod = hotModulesMap.get(path)
  if (!mod) {
    return
  }

  const moduleMap = new Map()
  // 自更新
  const isSelfUpdate = path === acceptedPath

  // make sure we only import each dep once
  const modulesToUpdate = new Set<string>()
  if (isSelfUpdate) {
    // self update - only update self
    modulesToUpdate.add(path)
  } else {
    // dep update
    for (const { deps } of mod.callbacks) {
      deps.forEach((dep) => {
        if (acceptedPath === dep) {
          modulesToUpdate.add(dep)
        }
      })
    }
  }

  // determine the qualified callbacks before we re-import the modules
  // 符合标准的更新函数才会留下来
  const qualifiedCallbacks = mod.callbacks.filter(({ deps }) => {
    return deps.some((dep) => modulesToUpdate.has(dep))
  })

  // 将modulesToUpdate变成对应模块的更新函数
  await Promise.all(
    Array.from(modulesToUpdate).map(async (dep) => {
      const disposer = disposeMap.get(dep)
      if (disposer) await disposer(dataMap.get(dep))
      const [path, query] = dep.split(`?`)
      try {
        // 这里又会发一个请求,然后新的模块就下来了,但是dom树还没变化,下载下来的文件会有id,对应当前即将被更新的模块
        const newMod = await import(
          /* @vite-ignore */
          path + `?t=${timestamp}${query ? `&${query}` : ''}`
        )
        moduleMap.set(dep, newMod)
      } catch (e) {
        warnFailedFetch(e, dep)
      }
    })
  )

  // 返回函数,函数内容是plugin-vue中的accept注入的,比如vue文件就是vue的render更新方法
  // 这里会调用新文件中的render方法,进而在浏览器端进行模块更新操作
  return () => {
    for (const { deps, fn } of qualifiedCallbacks) {
      fn(deps.map((dep) => moduleMap.get(dep)))
    }
    const loggedPath = isSelfUpdate ? path : `${acceptedPath} via ${path}`
    console.log(`[vite] hot updated: ${loggedPath}`)
  }
}

fetchUpdate的结果会流向queueUpdate,queueUpdate将更新任务放到微任务中,自动收集一定时间内的渲染。

async function queueUpdate(p: Promise<(() => void) | undefined>) {
  queued.push(p)
  if (!pending) {
    pending = true
    await Promise.resolve()
    pending = false
    const loading = [...queued]
    queued = []
    ;(await Promise.all(loading)).forEach((fn) => fn && fn())
  }
}

vite简版流程图

总结

vite对es module的使用让人惊艳,一下子解决了大项目build所有内容的痛点,而且与rollup完美集结合,任何rollup插件都可以在vite中使用。

当然,vite的这种思想不是首例,很早之前snowpack利用es module也是名噪一时。

vite目前主要解决的是dev环境的问题,生产环境还是需要build才能使用,vite使用esbuild进行生产环境打包,esbuild使用go开发,原生到原生,感兴趣的朋友可以去看一看,这里就不班门弄斧了。

最后感谢大家的内心阅读,如果觉得不错,可以通过关注,点赞,转发多多支持~

祝大家工作顺利,节节高升

我的程序员之路:自学Java篇

相关推荐

发表评论

路人甲

网友评论(0)