vitejs預構建理解及流程解析

 更新時間:2022年07月06日 10:29:51   作者:前端論道  
這篇文章主要為大家介紹了vitejs預構建理解及流程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

引言

vite在官網介紹中,第一條就提到的特性就是自己的本地冷啟動極快。這主要是得益于它在本地服務啟動的時候做了預構建。出于好奇,抽時間了解了下vite在預構建部分的主要實現思路,分享出來供大家參考。

為啥要預構建

簡單來講就是為了提高本地開發服務器的冷啟動速度。按照vite的說法,當冷啟動開發服務器時,基于打包器的方式啟動必須優先抓取并構建你的整個應用,然后才能提供服務。隨著應用規模的增大,打包速度顯著下降,本地服務器的啟動速度也跟著變慢。

為了加快本地開發服務器的啟動速度,vite 引入了預構建機制。在預構建工具的選擇上,vite選擇了 esbuild 。esbuild 使用 Go 編寫,比以 JavaScript 編寫的打包器構建速度快 10-100 倍,有了預構建,再利用瀏覽器的esm方式按需加載業務代碼,動態實時進行構建,結合緩存機制,大大提升了服務器的啟動速度。

預構建的流程

1. 查找依賴

如果是首次啟動本地服務,那么vite會自動抓取源代碼,從代碼中找到需要預構建的依賴,最終對外返回類似下面的一個deps對象:

{
  vue: '/path/to/your/project/node_modules/vue/dist/vue.runtime.esm-bundler.js',
  'element-plus': '/path/to/your/project/node_modules/element-plus/es/index.mjs',
  'vue-router': '/path/to/your/project/node_modules/vue-router/dist/vue-router.esm-bundler.js'
}

具體實現就是,調用esbuildbuild api,以index.html作為查找入口(entryPoints),將所有的來自node_modules以及在配置文件的optimizeDeps.include選項中指定的模塊找出來。

//...省略其他代碼
  if (explicitEntryPatterns) {
    entries = await globEntries(explicitEntryPatterns, config)
  } else if (buildInput) {
    const resolvePath = (p: string) => path.resolve(config.root, p)
    if (typeof buildInput === 'string') {
      entries = [resolvePath(buildInput)]
    } else if (Array.isArray(buildInput)) {
      entries = buildInput.map(resolvePath)
    } else if (isObject(buildInput)) {
      entries = Object.values(buildInput).map(resolvePath)
    } else {
      throw new Error('invalid rollupOptions.input value.')
    }
  } else {
    // 重點看這里:使用html文件作為查找入口
    entries = await globEntries('**/*.html', config)
  }
//...省略其他代碼
build.onResolve(
        {
          // avoid matching windows volume
          filter: /^[\w@][^:]/
        },
        async ({ path: id, importer }) => {
          const resolved = await resolve(id, importer)
          if (resolved) {
            // 來自node_modules和在include中指定的模塊
            if (resolved.includes('node_modules') || include?.includes(id)) {
              // dependency or forced included, externalize and stop crawling
              if (isOptimizable(resolved)) {
                // 重點看這里:將符合預構建條件的依賴記錄下來,depImports就是對外導出的需要預構建的依賴對象
                depImports[id] = resolved
              }
              return externalUnlessEntry({ path: id })
            } else if (isScannable(resolved)) {
              const namespace = htmlTypesRE.test(resolved) ? 'html' : undefined
              // linked package, keep crawling
              return {
                path: path.resolve(resolved),
                namespace
              }
            } else {
              return externalUnlessEntry({ path: id })
            }
          } else {
            missing[id] = normalizePath(importer)
          }
        }
      )

但是熟悉esbuild的小伙伴可能知道,esbuild默認支持的入口文件類型有js、ts、jsx、css、json、base64、dataurl、binary、file(.png等),并不包括html。

vite是如何做到將index.html作為打包入口的呢?原因是vite自己實現了一個esbuild插件esbuildScanPlugin,來處理.vue.html這種類型的文件。

具體做法是讀取html的內容,然后將里面的script提取到一個esm格式的js模塊。

      // 對于html類型(.VUE/.HTML/.svelte等)的文件,提取文件里的script內容。html types: extract script contents -----------------------------------
      build.onResolve({ filter: htmlTypesRE }, async ({ path, importer }) => {
        const resolved = await resolve(path, importer)
        if (!resolved) return
        // It is possible for the scanner to scan html types in node_modules.
        // If we can optimize this html type, skip it so it's handled by the
        // bare import resolve, and recorded as optimization dep.
        if (resolved.includes('node_modules') && isOptimizable(resolved)) return
        return {
          path: resolved,
          namespace: 'html'
        }
      })
      // 配合build.onResolve,對于類html文件,提取其中的script,作為一個js模塊extract scripts inside HTML-like files and treat it as a js module
      build.onLoad(
        { filter: htmlTypesRE, namespace: 'html' },
        async ({ path }) => {
          let raw = fs.readFileSync(path, 'utf-8')
          // Avoid matching the content of the comment
          raw = raw.replace(commentRE, '<!---->')
          const isHtml = path.endsWith('.html')
          const regex = isHtml ? scriptModuleRE : scriptRE
          regex.lastIndex = 0
          // js 的內容被處理成了一個虛擬模塊
          let js = ''
          let scriptId = 0
          let match: RegExpExecArray | null
          while ((match = regex.exec(raw))) {
            const [, openTag, content] = match
            const typeMatch = openTag.match(typeRE)
            const type =
              typeMatch && (typeMatch[1] || typeMatch[2] || typeMatch[3])
            const langMatch = openTag.match(langRE)
            const lang =
              langMatch && (langMatch[1] || langMatch[2] || langMatch[3])
            // skip type="application/ld+json" and other non-JS types
            if (
              type &&
              !(
                type.includes('javascript') ||
                type.includes('ecmascript') ||
                type === 'module'
              )
            ) {
              continue
            }
            // 默認的js文件的loader是js,其他對于ts、tsx jsx有對應的同名loader
            let loader: Loader = 'js'
            if (lang === 'ts' || lang === 'tsx' || lang === 'jsx') {
              loader = lang
            }
            const srcMatch = openTag.match(srcRE)
            // 對于<script src='path/to/some.js'>引入的js,將它轉換為import 'path/to/some.js'的代碼
            if (srcMatch) {
              const src = srcMatch[1] || srcMatch[2] || srcMatch[3]
              js += `import ${JSON.stringify(src)}\n`
            } else if (content.trim()) {
              // The reason why virtual modules are needed:
              // 1. There can be module scripts (`<script context="module">` in Svelte and `<script>` in Vue)
              // or local scripts (`<script>` in Svelte and `<script setup>` in Vue)
              // 2. There can be multiple module scripts in html
              // We need to handle these separately in case variable names are reused between them
              // append imports in TS to prevent esbuild from removing them
              // since they may be used in the template
              const contents =
                content +
                (loader.startsWith('ts') ? extractImportPaths(content) : '')
                // 將提取出來的script腳本,存在以xx.vue?id=1為key的script對象中script={'xx.vue?id=1': 'js contents'}
              const key = `${path}?id=${scriptId++}`
              if (contents.includes('import.meta.glob')) {
                scripts[key] = {
                  // transformGlob already transforms to js
                  loader: 'js',
                  contents: await transformGlob(
                    contents,
                    path,
                    config.root,
                    loader,
                    resolve,
                    config.logger
                  )
                }
              } else {
                scripts[key] = {
                  loader,
                  contents
                }
              }
              const virtualModulePath = JSON.stringify(
                virtualModulePrefix + key
              )
              const contextMatch = openTag.match(contextRE)
              const context =
                contextMatch &&
                (contextMatch[1] || contextMatch[2] || contextMatch[3])
              // Especially for Svelte files, exports in <script context="module"> means module exports,
              // exports in <script> means component props. To avoid having two same export name from the
              // star exports, we need to ignore exports in <script>
              if (path.endsWith('.svelte') && context !== 'module') {
                js += `import ${virtualModulePath}\n`
              } else {
                // e.g. export * from 'virtual-module:xx.vue?id=1'
                js += `export * from ${virtualModulePath}\n`
              }
            }
          }
          // This will trigger incorrectly if `export default` is contained
          // anywhere in a string. Svelte and Astro files can't have
          // `export default` as code so we know if it's encountered it's a
          // false positive (e.g. contained in a string)
          if (!path.endsWith('.vue') || !js.includes('export default')) {
            js += '\nexport default {}'
          }
          return {
            loader: 'js',
            contents: js
          }
        }
      )

由上文我們可知,來自node_modules中的模塊依賴是需要預構建的。

例如import ElementPlus from 'element-plus'。

因為在瀏覽器環境下,是不支持這種裸模塊引用的(bare import)。

另一方面,如果不進行構建,瀏覽器面對由成百上千的子模塊組成的依賴,依靠原生esm的加載機制,每個的依賴的import都將產生一次http請求。面對大量的請求,瀏覽器是吃不消的。

因此客觀上需要對裸模塊引入進行打包,并處理成瀏覽器環境下支持的相對路徑或路徑的導入方式。

例如:import ElementPlus from '/path/to/.vite/element-plus/es/index.mjs'。

2. 對查找到的依賴進行構建

在上一步,已經得到了需要預構建的依賴列表?,F在需要把他們作為esbuildentryPoints打包就行了。

//使用esbuild打包,入口文件即為第一步中抓取到的需要預構建的依賴
    import { build } from 'esbuild'
   // ...省略其他代碼
    const result = await build({
      absWorkingDir: process.cwd(),
     // flatIdDeps即為第一步中所得到的需要預構建的依賴對象
      entryPoints: Object.keys(flatIdDeps),
      bundle: true,
      format: 'esm',
      target: config.build.target || undefined,
      external: config.optimizeDeps?.exclude,
      logLevel: 'error',
      splitting: true,
      sourcemap: true,
// outdir指定打包產物輸出目錄,processingCacheDir這里并不是.vite,而是存放構建產物的臨時目錄
      outdir: processingCacheDir,
      ignoreAnnotations: true,
      metafile: true,
      define,
      plugins: [
        ...plugins,
        esbuildDepPlugin(flatIdDeps, flatIdToExports, config, ssr)
      ],
      ...esbuildOptions
    })
    // 寫入_metadata文件,并替換緩存文件。Write metadata file, delete `deps` folder and rename the new `processing` folder to `deps` in sync
    commitProcessingDepsCacheSync()

vite并沒有將esbuildoutdir(構建產物的輸出目錄)直接配置為.vite目錄,而是先將構建產物存放到了一個臨時目錄。當構建完成后,才將原來舊的.vite(如果有的話)刪除。然后再將臨時目錄重命名為.vite。這樣做主要是為了避免在程序運行過程中發生了錯誤,導致緩存不可用。

  function commitProcessingDepsCacheSync() {
    // Rewire the file paths from the temporal processing dir to the final deps cache dir
    const dataPath = path.join(processingCacheDir, '_metadata.json')
    writeFile(dataPath, stringifyOptimizedDepsMetadata(metadata))
    // Processing is done, we can now replace the depsCacheDir with processingCacheDir
    // 依賴處理完成后,使用依賴緩存目錄替換處理中的依賴緩存目錄
    if (fs.existsSync(depsCacheDir)) {
      const rmSync = fs.rmSync ?? fs.rmdirSync // TODO: Remove after support for Node 12 is dropped
      rmSync(depsCacheDir, { recursive: true })
    }
    fs.renameSync(processingCacheDir, depsCacheDir)
  }
}

以上就是預構建的主要處理流程。

緩存與預構建

vite冷啟動之所以快,除了esbuild本身構建速度夠快外,也與vite做了必要的緩存機制密不可分。

vite在預構建時,除了生成預構建的js文件外,還會創建一個_metadata.json文件,其結構大致如下:

{
  "hash": "22135fca",
  "browserHash": "632454bc",
  "optimized": {
    "vue": {
      "file": "/path/to/your/project/node_modules/.vite/vue.js",
      "src": "/path/to/your/project/node_modules/vue/dist/vue.runtime.esm-bundler.js",
      "needsInterop": false
    },
    "element-plus": {
      "file": "/path/to/your/project/node_modules/.vite/element-plus.js",
      "src": "/path/to/your/project/node_modules/element-plus/es/index.mjs",
      "needsInterop": false
    },
    "vue-router": {
      "file": "/path/to/your/project/node_modules/.vite/vue-router.js",
      "src": "/path/to/your/project/node_modules/vue-router/dist/vue-router.esm-bundler.js",
      "needsInterop": false
    }
  }
}

hash 是緩存的主要標識,由vite的配置文件和項目依賴決定(依賴的信息取自package-lock.json、yarn.lock、pnpm-lock.yaml)。 所以如果用戶修改了vite.config.js或依賴發生了變化(依賴的添加刪除更新會導致lock文件變化)都會令hash發生變化,緩存也就失效了。這時,vite需要重新進行預構建。當然如果手動刪除了.vite緩存目錄,也會重新構建。

// 基于配置文件+依賴信息生成hash
const lockfileFormats = ['package-lock.json', 'yarn.lock', 'pnpm-lock.yaml']
function getDepHash(root: string, config: ResolvedConfig): string {
  let content = lookupFile(root, lockfileFormats) || ''
  // also take config into account
  // only a subset of config options that can affect dep optimization
  content += JSON.stringify(
    {
      mode: config.mode,
      root: config.root,
      define: config.define,
      resolve: config.resolve,
      buildTarget: config.build.target,
      assetsInclude: config.assetsInclude,
      plugins: config.plugins.map((p) => p.name),
      optimizeDeps: {
        include: config.optimizeDeps?.include,
        exclude: config.optimizeDeps?.exclude,
        esbuildOptions: {
          ...config.optimizeDeps?.esbuildOptions,
          plugins: config.optimizeDeps?.esbuildOptions?.plugins?.map(
            (p) => p.name
          )
        }
      }
    },
    (_, value) => {
      if (typeof value === 'function' || value instanceof RegExp) {
        return value.toString()
      }
      return value
    }
  )
  return createHash('sha256').update(content).digest('hex').substring(0, 8)
}

vite啟動時首先檢查hash的值,如果當前的hash值與_metadata.json中的hash值相同,說明項目的依賴沒有變化,無需重復構建了,直接使用緩存即可。

// 計算當前的hash
const mainHash = getDepHash(root, config)
 const metadata: DepOptimizationMetadata = {
    hash: mainHash,
    browserHash: mainHash,
    optimized: {},
    discovered: {},
    processing: processing.promise
  }
 let prevData: DepOptimizationMetadata | undefined
    try {
      const prevDataPath = path.join(depsCacheDir, '_metadata.json')
      prevData = parseOptimizedDepsMetadata(
        fs.readFileSync(prevDataPath, 'utf-8'),
        depsCacheDir,
        processing.promise
      )
    } catch (e) { }
    // hash is consistent, no need to re-bundle
    // 比較緩存的hash與當前hash
    if (prevData && prevData.hash === metadata.hash) {
      log('Hash is consistent. Skipping. Use --force to override.')
      return {
        metadata: prevData,
        run: () => (processing.resolve(), processing.promise)
      }
    }

總結

以上就是vite預構建的主要處理邏輯,總結起來就是先查找需要預構建的依賴,然后將這些依賴作為entryPoints進行構建,構建完成后更新緩存。vite在啟動時為提升速度,會檢查緩存是否有效,有效的話就可以跳過預構建環節,緩存是否有效的判定是對比緩存中的hash值與當前的hash值是否相同。由于hash的生成算法是基于vite配置文件和項目依賴的,所以配置文件和依賴的的變化都會導致hash發生變化,從而重新進行預構建。

更多關于vitejs預構建流程的資料請關注腳本之家其它相關文章!,希望大家以后多多支持腳本之家!

相關文章

  • 關于vant折疊面板默認展開問題

    關于vant折疊面板默認展開問題

    這篇文章主要介紹了關于vant折疊面板默認展開問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue 開發必須知道的36個技巧(小結)

    Vue 開發必須知道的36個技巧(小結)

    這篇文章主要介紹了Vue 開發必須知道的36個技巧(小結),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • mpvue微信小程序開發之實現一個彈幕評論

    mpvue微信小程序開發之實現一個彈幕評論

    這篇文章主要介紹了mpvue小程序開發之 實現一個彈幕評論功能,本文通過實例講解的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-11-11
  • VsCode里的Vue模板的實現

    VsCode里的Vue模板的實現

    這篇文章主要介紹了VsCode里的Vue模板的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-08-08
  • vue數據傳遞--我有特殊的實現技巧

    vue數據傳遞--我有特殊的實現技巧

    這篇文章主要介紹了vue數據傳遞一些特殊梳理技巧,需要的朋友可以參考下
    2018-03-03
  • 用vue封裝插件并發布到npm的方法步驟

    用vue封裝插件并發布到npm的方法步驟

    本篇文章主要介紹了用vue封裝插件并發布到npm的方法步驟,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • vue activated在子組件中的使用詳情

    vue activated在子組件中的使用詳情

    這篇文章主要介紹了vue activated在子組件中的使用,文章圍繞vue activated的xingu你資料講解展開內容并附上具體代碼,需要的朋友可以參考一下
    2021-11-11
  • SpringBoot+Vue 前后端合并部署的配置方法

    SpringBoot+Vue 前后端合并部署的配置方法

    這篇文章主要介紹了SpringBoot+Vue 前后端合并部署的配置方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-12-12
  • Vue實現星級評價效果

    Vue實現星級評價效果

    這篇文章主要為大家詳細介紹了Vue實現星級評價效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue 實現輸入框新增搜索歷史記錄功能

    Vue 實現輸入框新增搜索歷史記錄功能

    這篇文章主要介紹了Vue 輸入框新增搜索歷史記錄功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-10-10

最新評論

美丽人妻被按摩中出中文字幕