--- theme: cyanosis highlight: monokai --- >先看下官网介绍当你首次启动 `vite` 时，你可能会注意到打印出了以下信息： ```bash Optimizable dependencies detected: （侦测到可优化的依赖：） react, react-dom Pre-bundling them to speed up dev server page load...（将预构建它们以提升开发服务器页面加载速度） (this will be run only when your dependencies have changed)（这将只会在你的依赖发生变化时执行） ``` ## 预构建作用 ### CommonJS 和 UMD 兼容性开发阶段中，Vite 的开发服务器将所有代码视为原生 ES 模块。因此，Vite 必须先将作为 CommonJS 或 UMD 发布的依赖项转换为 ESM。当转换 CommonJS 依赖时，Vite 会执行智能导入分析，这样即使导出是动态分配的（如 React），按名导入也会符合预期效果： ```typescript // 符合预期 import React, { useState } from 'react' ``` ### 性能 Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块，以提高后续页面加载性能；减少网络请求。 ### 缓存 #### 文件系统缓存 Vite 会将预构建的依赖缓存到 `node_modules/.vite`。它根据几个源来决定是否需要重新运行预构建步骤: - `package.json` 中的 `dependencies` 列表 - 包管理器的 lockfile，例如 `package-lock.json`, `yarn.lock`，或者 `pnpm-lock.yaml` - 可能在 `vite.config.js` 相关字段中配置过的只有在上述其中一项发生更改时，才需要重新运行预构建。如果出于某些原因，你想要强制 Vite 重新构建依赖，你可以用 `--force` 命令行选项启动开发服务器，或者手动删除 `node_modules/.vite` 目录。 #### 浏览器缓存解析后的依赖请求会以 HTTP 头 `max-age=31536000,immutable` 强缓存，以提高在开发时的页面重载性能。一旦被缓存，这些请求将永远不会再到达开发服务器。如果安装了不同的版本（这反映在包管理器的 lockfile 中），**则附加的版本 query（`v=xxx`）会自动使它们失效**。接下来来看源码是怎么实现上述功能的 ## 源码本地服务器启动时，会进行预构建 ```typescript const server = await createServer({ root, base: options.base, mode: options.mode, configFile: options.config, logLevel: options.logLevel, clearScreen: options.clearScreen, server: cleanOptions(options), }) await server.listen() ``` 通过`createServer`创建`server`对象后，调用`server.listen`方法启动服务器。启动后会执行`httpServer.listen`方法在执行`createServer`时，会重写`server.listen`方法 ```typescript let isOptimized = false // overwrite listen to run optimizer before server start const listen = httpServer.listen.bind(httpServer) httpServer.listen = (async (port: number, ...args: any[]) => { if (!isOptimized) { try { // 调用所有插件的 buildStart 钩子函数 await container.buildStart({}) await runOptimize() isOptimized = true } catch (e) { httpServer.emit('error', e) return } } return listen(port, ...args) }) as any ``` 首先调用所有插件的`buildStart`方法，然后调用`runOptimize`方法 ```typescript const runOptimize = async () => { // 获取缓存路径，默认是 node_modules/.vite if (config.cacheDir) { // 表示当前正在预构建 server._isRunningOptimizer = true try { server._optimizeDepsMetadata = await optimizeDeps(config) } finally { server._isRunningOptimizer = false } server._registerMissingImport = createMissingImporterRegisterFn(server) } } ``` 上述代码先调用`optimizeDeps`方法，然后调用`createMissingImporterRegisterFn`方法。先看下`optimizeDeps`方法，这个方法比较大，这里我们分步来看他做了啥 ```typescript export async function optimizeDeps( config: ResolvedConfig, force = config.server.force, // 设置为 true 强制使依赖预构建 asCommand = false, newDeps?: Record, // missing imports encountered after server has started ssr?: boolean ): Promise { // 重新赋值 config config = { ...config, command: 'build', } const { root, logger, cacheDir } = config // 拼接 _metadata.json 文件的路径（一般在 node_modules/.vite/_metadata.json） const dataPath = path.join(cacheDir, '_metadata.json') // 根据包管理器的 lockfile、vite.config.js 相关字段生成 hash 值 // 官网说还会根据 package.json 中的 dependencies 列表，但是现在这个版本没有这样，可能是后续版本更新了 const mainHash = getDepHash(root, config) const data: DepOptimizationMetadata = { hash: mainHash, browserHash: mainHash, optimized: {}, } // ... ``` 首先拼接 `_metadata.json` 文件的路径，一般在`node_modules/.vite/_metadata.json`。然后通过`getDepHash`生成 hash 值。并创建一个`data`对象 `_metadata.json`文件的作用是存储了预构建模块的一些信息，后续会详细介绍 ```typescript if (!force) { let prevData: DepOptimizationMetadata | undefined try { // 获取 cacheDir 中 _metadata.json 文件的内容 prevData = JSON.parse(fs.readFileSync(dataPath, 'utf-8')) } catch (e) {} // 如果 _metadata.json 有内容，并且之前的哈希值和现在刚生成的哈希值相同 // 则表示没有依赖项发生改变，直接返回现在的 _metadata.json 的内容 if (prevData && prevData.hash === data.hash) { log('Hash is consistent. Skipping. Use --force to override.') return prevData } } ``` 如果没有设置`force`(强制使依赖预构建)，从`_metadata.json`中读取上次文件的内容，并判断hash值是否和现在的相同，如果相同，则直接返回`_metadata.json`中的内容。接下来的逻辑就是如果依赖发生改变，或者没有预构建过；根据`cacheDir`创建空文件夹，这里就是`.vite`文件夹。然后在文件夹中创建`package.json`文件，并写入`"type": "module"` ```typescript // 如果有 cacheDir（默认.vite），清空缓存文件夹 // 如果没有，创建一个空文件 if (fs.existsSync(cacheDir)) { emptyDir(cacheDir) } else { // 如果 recursive 为 true 返回创建的第一个目录路径，反之返回 undefined fs.mkdirSync(cacheDir, { recursive: true }) } // cacheDir 中创建 package.json，并写入 "type": "module" // 作用：给 Node 提示，缓存目录中的所有文件都应该被识别为 ES 模块 writeFile( path.resolve(cacheDir, 'package.json'), JSON.stringify({ type: 'module' }) ) ``` #### 小结在这里先总结下上面的流程 - 根据包管理器的 lockfile、vite.config.js 相关字段生成 hash 值 - 获取`_metadata.json`文件的路径，里面的内容是上次预构建模块的信息 - 如果不是强制预构建，比对`_metadata.json`文件中的 hash 和新创建的 hash 值 - 如果一致直接返回`_metadata.json`中的内容 - 如果不一致，创建/清空缓存文件夹（默认是`.vite`）；缓存文件内创建`package.json`文件，并写入` "type": "module"` 继续向下，根据传入的`newDeps`判断有没有依赖列表。如果没有，通过`scanImports`方法收集列表 ```typescript let deps: Record, missing: Record if (!newDeps) { ;({ deps, missing } = await scanImports(config)) } else { deps = newDeps missing = {} } ``` ### 自动依赖搜寻 `scanImports`方法定义如下，也是一步一步的看 ```typescript export async function scanImports(config: ResolvedConfig): Promise<{ deps: Record missing: Record }> { const start = performance.now() let entries: string[] = [] // 一般都是用默认的 index.html // 默认情况下，Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 build.rollupOptions.input，Vite 将转而去抓取这些入口点。 // 如果这两者都不适合你的需要，则可以使用此选项指定自定义条目，或者是相对于 vite 项目根的模式数组。这将覆盖掉默认条目推断。 const explicitEntryPatterns = config.optimizeDeps.entries const buildInput = config.build.rollupOptions?.input if (explicitEntryPatterns) { // 如果配置了 config.optimizeDeps.entries // 在 config.root 下查找 explicitEntryPatterns 中对应的文件，并返回绝对路径 entries = await globEntries(explicitEntryPatterns, config) } else if (buildInput) { // 如果配置了 build.rollupOptions.input const resolvePath = (p: string) => path.resolve(config.root, p) // 下面的逻辑都是将 buildInput 的路径修改为相对于 config.root 的路径 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) } // 不支持的入口文件类型和虚拟文件不应该扫描依赖项。 // 过滤非 .jsx .tsx .mjs .html .vue .svelte .astro 文件，并且文件必须存在 entries = entries.filter( (entry) => (JS_TYPES_RE.test(entry) || htmlTypesRE.test(entry)) && fs.existsSync(entry) ) ``` 首先查找入口文件 - 如果有`config.optimizeDeps.entries`配置项，则入口文件从这里查找 - 如果有`config.build.rollupOptions.input`配置项，则入口文件从这里查找 - 上述两种都没有，在项目跟目录下查找`html`文件 ```typescript const deps: Record = {} const missing: Record = {} // 创建插件容器 const container = await createPluginContainer(config) // 创建 esbuildScanPlugin 插件 const plugin = esbuildScanPlugin(config, container, deps, missing, entries) // 获取预构建的 plugins 和配置项 const { plugins = [], ...esbuildOptions } = config.optimizeDeps?.esbuildOptions ?? {} ``` 接下来就是定义查找预构建模块需要的变量，比如插件容器`container`、`esbuildScanPlugin`插件、`config.optimizeDeps.esbuildOptions` 中定义的`plugins`和其他 ESbuild 配置项 ```typescript // 打包每个入口文件，并将引入的 js 合并到一起 await Promise.all( entries.map((entry) => build({ absWorkingDir: process.cwd(), write: false, entryPoints: [entry], bundle: true, format: 'esm', logLevel: 'error', plugins: [...plugins, plugin], ...esbuildOptions }) ) ) return { deps, missing } ``` 接着就是调用 ESbuild 从入口模块开始构建整个项目，获取需要预构建的模块，并将依赖列表返回。其中会执行`esbuildScanPlugin`插件，这个插件就是查找的核心，看下这个插件的实现 ```typescript const plugin = esbuildScanPlugin(config, container, deps, missing, entries) function esbuildScanPlugin( config: ResolvedConfig, container: PluginContainer, depImports: Record, missing: Record, entries: string[] ): Plugin { const seen = new Map() // 通过 container.resolveId 处理 id，最终返回该模块的绝对路径 // 并将这个模块路径添加到 seen 中，key 是 id + importer的上级目录，value是模块绝对路径 const resolve = async (id: string, importer?: string) => {} const include = config.optimizeDeps?.include // 忽略的包 const exclude = [ ...(config.optimizeDeps?.exclude || []), '@vite/client', '@vite/env', ] // 设置 build.onResolve 钩子函数的返回值 const externalUnlessEntry = ({ path }: { path: string }) => ({ path, // 模块路径 // 如果 entries 包含当前id，返回false // 如果 external 为 true，不会将当前模块打包到 bundle 中 // 这段代码的意思是，如果当前模块包含在 entries 中，将这个模块打包到 bundle 中 external: !entries.includes(path), }) return { name: 'vite:dep-scan', setup(build) {}, } } ``` `esbuildScanPlugin`方法返回一个插件对象；定义了一个查找路径的`resolve`函数，和获取配置项中需要预构建的列表和忽略列表这个插件会针对不同类型的文件做不同处理 #### 外部文件、`data:`开头的文件、css、json、不知名文件 ```typescript setup(build) { // 如果是 http(s) 的外部文件，不打包到 bundle 中 build.onResolve({ filter: externalRE }, ({ path }) => ({ path, external: true, })) // 如果是以 data: 开头，不打包到 bundle 中 build.onResolve({ filter: dataUrlRE }, ({ path }) => ({ path, external: true, })) // css & json build.onResolve( {filter: /\.(css|less|sass|scss|styl|stylus|pcss|postcss|json)$/}, externalUnlessEntry ) // known asset types build.onResolve( {filter: new RegExp(`\\.(${KNOWN_ASSET_TYPES.join('|')})$`)}, externalUnlessEntry ) // known vite query types: ?worker, ?raw build.onResolve({ filter: SPECIAL_QUERY_RE }, ({ path }) => ({ path, external: true, // 不注入 boundle 中 })) } ``` #### 第三方库上面这些比较简单，这里就不多介绍了，接下来看下对于第三方依赖是怎么处理的 ```typescript build.onResolve({ filter: /^[\w@][^:]/ }, async ({ path: id, importer }) => { // 判断引入的第三方模块是不是包含在 exclude 中 if (exclude?.some((e) => e === id || id.startsWith(e + '/'))) { return externalUnlessEntry({ path: id }) } // 如果当前模块已经被收集 if (depImports[id]) { return externalUnlessEntry({ path: id }) } // 获取第三方模块的绝对路径 const resolved = await resolve(id, importer) if (resolved) { // 虚拟路径、非绝对路径、非 .jsx .tsx .mjs .html .vue .svelte .astro 文件返回 true if (shouldExternalizeDep(resolved, id)) { return externalUnlessEntry({ path: id }) } // 重点！！！！这里进行收集第三方依赖 // 如果路径包含 node_modules 子字符串，或者该文件在 include 中存在 if (resolved.includes('node_modules') || include?.includes(id)) { // OPTIMIZABLE_ENTRY_RE = /\\.(?:m?js|ts)$/ if (OPTIMIZABLE_ENTRY_RE.test(resolved)) { // 添加到 depImports 中 depImports[id] = resolved } // 如果当前id，比如 vue，没有包含在entries时不将此文件打包到 bundle 中，反之打包 return externalUnlessEntry({ path: id }) } else { const namespace = htmlTypesRE.test(resolved) ? 'html' : undefined // linked package, keep crawling return { path: path.resolve(resolved), namespace, } } } else { // 说明没找到 id 对应的模块 missing[id] = normalizePath(importer) } }) ``` 如果模块导入路径**以字母、数字、下划线、汉字、`@`开头**，会被这个钩子函数捕获；获取模块绝对路径；如果模块路径包含`node_modules`子字符串，或者该模块在`include`中存在，并且是`mjs`、`js`、`ts`文件，则将这个模块添加到`depImports`中如果根据传入的`id`没有解析到模块路径，添加到`missing`中 #### HTML、Vue 文件对于 HTML、Vue文件，设置`namespace`为`html` ```typescript // htmlTypesRE = /\.(html|vue|svelte|astro)$/ // importer：绝对路径，该文件在哪个文件里被导入的 // 设置路径，并设置 namespace 为 html build.onResolve( { filter: htmlTypesRE }, async ({ path, importer }) => { return { path: await resolve(path, importer) namespace: 'html', } } ) ``` 当执行`build.onLoad`钩子函数时，`namespace`为`html`会命中一个`onload`钩子函数 ```typescript build.onLoad({ filter: htmlTypesRE, namespace: 'html' }, async ({ path }) => { // 读取html、Vue内容 let raw = fs.readFileSync(path, 'utf-8') // 将注释内容替换成 raw = raw.replace(commentRE, '') // 如果是 .html 结尾，则为true const isHtml = path.endsWith('.html') // 如果是 .html 结尾，则 regex 匹配 type 为 module 的 script 标签，反之，比如 Vue 匹配没有 type 属性的 script 标签 // scriptModuleRE[1]: