vite依赖预构建(源码分析)

vite主张的是no bundle, 但是在开发环境,对于第三方依赖会基于esbuild进行依赖预构建,为什么选择esbuild,根据测试,发现esbuild构建速度对比rollup webpack非常快,开发环境注重效率。

依赖为什么需要预构建

性能方面考虑

  1. 如果依赖不构建,那么加载依赖的时候,比如lodash,有数百个模块,加载多次,影响性能,所以将依赖构建后,统一一个出口透出。

统一成ES Module

  1. 有些第三方包对外透出的是CommonJS和UMD等格式,需要将其转换成ESM格式,然后才能在浏览器中正常加载

vite预构建产物

构建产物会缓存在node_modules/.vite目录下

依赖预构建源码流程解析

主流程如下,主要实现在createDepsOptimizer()中

第一步:缓存判断

  1. 主要根据metadata中的lock文件的hash值和lock文件的生成的hash比对是否一致, metadata中的configHash值和config内容生成的hash比对是否一致;主要判断optimizeDeps上的配置,是否有变更;
js 复制代码
const lockfileFormats = [
  { name: "package-lock.json", checkPatches: true, manager: "npm" },
  { name: "yarn.lock", checkPatches: true, manager: "yarn" },
  // Included in lockfile for v2+
  { name: "pnpm-lock.yaml", checkPatches: false, manager: "pnpm" },
  // Included in lockfile
  { name: "bun.lockb", checkPatches: true, manager: "bun" }
].sort((_, { manager }) => {
  return process.env.npm_config_user_agent?.startsWith(manager) ? 1 : -1;
});
js 复制代码
      optimizeDeps: {
        include: optimizeDeps2?.include ? unique(optimizeDeps2.include).sort() : void 0,
        exclude: optimizeDeps2?.exclude ? unique(optimizeDeps2.exclude).sort() : void 0,
        esbuildOptions: {
          ...optimizeDeps2?.esbuildOptions,
          plugins: optimizeDeps2?.esbuildOptions?.plugins?.map((p) => p.name)
        }
      }
lua 复制代码
    if (cachedMetadata) {
      if (cachedMetadata.lockfileHash !== getLockfileHash(config)) {
        config.logger.info(
          "Re-optimizing dependencies because lockfile has changed"
        );
      } else if (cachedMetadata.configHash !== getConfigHash(config, ssr)) {
        config.logger.info(
          "Re-optimizing dependencies because vite config has changed"
        );
      } else {
        log?.("Hash is consistent. Skipping. Use --force to override.");
        return cachedMetadata;
      }
    }

第二步:发现依赖&依赖收集

扫描入口判断

判断是否有指定的optimizeDeps的entries和input等配置,找到依赖扫描的入口,如果没有入口就指定根路径的html文件为入口;

js 复制代码
async function computeEntries(config) {
  let entries = [];
  const explicitEntryPatterns = config.optimizeDeps.entries;
  const buildInput = config.build.rollupOptions?.input;
  if (explicitEntryPatterns) {
    entries = await globEntries(explicitEntryPatterns, config);
  } else if (buildInput) {
    const resolvePath = (p) => path$n.resolve(config.root, p);
    if (typeof buildInput === "string") {
      entries = [resolvePath(buildInput)];
    } else if (Array.isArray(buildInput)) {
      entries = buildInput.map(resolvePath);
    } else if (isObject$1(buildInput)) {
      entries = Object.values(buildInput).map(resolvePath);
    } else {
      throw new Error("invalid rollupOptions.input value.");
    }
  } else {
    entries = await globEntries("**/*.html", config);
  }
  entries = entries.filter(
    (entry) => isScannable(entry, config.optimizeDeps.extensions) && fs__default.existsSync(entry)
  );
  return entries;
}

准备扫描器

主要基于esbuild.context(), 生成依赖扫描器,并把自定义的插件esbuildScanPlugin传递进去;

生成依赖, 存储在deps

js 复制代码
return context.rebuild().then(() => {
  return {
    // Ensure a fixed order so hashes are stable and improve logs
    deps: orderedDependencies(deps),
    missing
  };

第三步:打包依赖

将上一步收集到的depsInfo依赖列表,传递给esbuild.context()来进行分析,然后调用rebuild()这一步依赖就生成了。

依赖路径重写

我们在源码中的写的Import, 最后被重写成esbuild预构建后的路径

实现原理

在createServer阶段,就注册了多个中间件,当浏览器请求main.ts时,会触发transformMiddleware

主要流程

vite:import-analysis插件

  1. 通过es-module-lexer提取出所有的import数据;
  2. 通过上面依赖预构建生成的dep,可以获取到esbuild生成的路径,interopNamedImports()中替换源码中的路径生成新的code;
相关推荐
顺丰同城前端技术团队9 分钟前
DeepSeek 国产大模型新标杆
前端·后端·程序员
Java水解10 分钟前
微前端架构:从单体到模块化的前端新革命
前端
Mr_汪12 分钟前
uniapp使用h5的map(已弃用)
前端
前端进阶者15 分钟前
vite调试node_modules下面插件
前端·vite
YaHuiLiang23 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户261245834016125 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
CAD老兵31 分钟前
前端 Source Map 原理与结构详解
前端
gnip35 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长1 小时前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_1 小时前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js