Vite 预构建源码梳理：深入理解预构建过程

前端

2024-01-10 15:16:05

Vite 预构建：概览

Vite 是一个现代化的前端构建工具，它使用原生 ESM（ECMAScript 模块）来加速开发。为了进一步提升性能，Vite 引入了预构建机制，可以在构建时对代码进行优化。

预构建流程

Vite 的预构建流程分为以下几个阶段：

启动预构建： 在服务启动前，Vite 会调用 build() 方法触发预构建。
生成依赖图： Vite 根据入口文件解析依赖关系，生成一个依赖图。
优化依赖： 对于非 ESM 模块，Vite 会将其转换为 ESM 模块，并进行代码分割和按需加载优化。
生成预构建清单： 预构建完成后，Vite 会生成一个包含优化后依赖项的预构建清单。

预构建源码梳理

预构建的源码主要位于 src/node/server/build.ts 文件中。

启动预构建

// src/node/server/build.ts

export async function build() {
  // ...
  await triggerBuild();
  // ...
}

生成依赖图

// src/node/server/build.ts

async function triggerBuild() {
  // ...
  const importGraph = createImportGraph(config.root, config.build.ssr);
  // ...
}

优化依赖

// src/node/server/build.ts

function optimizeDeps(importGraph) {
  // ...
  if (isEsmSpecifier(dep.file)) {
    // ...
  } else {
    // ...
  }
  // ...
}

生成预构建清单

// src/node/server/build.ts

function generateManifest() {
  // ...
  const manifest = createManifest({
    appType: appType,
    build: build,
    appPath: config.root,
    // ...
  });
  // ...
}