perf: lazy load esbuild

packages/vite/src/node/config.ts

@@ -8,7 +8,6 @@ import { createRequire } from 'node:module'
 import colors from 'picocolors'
 import type { Alias, AliasOptions } from 'dep-types/alias'
 import aliasPlugin from '@rollup/plugin-alias'
-import { build } from 'esbuild'
 import type { RollupOptions } from 'rollup'
 import type { HookHandler, Plugin, PluginWithRequiredHook } from './plugin'
 import type {
@@ -30,6 +29,7 @@ import {
   asyncFlatten,
   createDebugger,
   createFilter,
+  importEsbuild,
   isBuiltin,
   isExternalUrl,
   isFilePathESM,
@@ -1009,6 +1009,8 @@ async function bundleConfigFile(
   const dirnameVarName = '__vite_injected_original_dirname'
   const filenameVarName = '__vite_injected_original_filename'
   const importMetaUrlVarName = '__vite_injected_original_import_meta_url'
+
+  const { build } = await importEsbuild()
   const result = await build({
     absWorkingDir: process.cwd(),
     entryPoints: [fileName],

packages/vite/src/node/optimizer/index.ts

@@ -5,7 +5,6 @@ import { promisify } from 'node:util'
 import { performance } from 'node:perf_hooks'
 import colors from 'picocolors'
 import type { BuildContext, BuildOptions as EsbuildBuildOptions } from 'esbuild'
-import esbuild, { build } from 'esbuild'
 import { init, parse } from 'es-module-lexer'
 import glob from 'fast-glob'
 import { getDepOptimizationConfig } from '../config'
@@ -14,6 +13,7 @@ import {
   createDebugger,
   flattenId,
   getHash,
+  importEsbuild,
   isOptimizable,
   isWindows,
   lookupFile,
@@ -759,6 +759,7 @@ async function prepareEsbuildOptimizerRun(
   }
   plugins.push(esbuildDepPlugin(flatIdDeps, external, config, ssr))
 
+  const esbuild = await importEsbuild()
   const context = await esbuild.context({
     absWorkingDir: process.cwd(),
     entryPoints: Object.keys(flatIdDeps),
@@ -1058,6 +1059,7 @@ export async function extractExportsData(
     // For custom supported extensions, build the entry file to transform it into JS,
     // and then parse with es-module-lexer. Note that the `bundle` option is not `true`,
     // so only the entry file is being transformed.
+    const { build } = await importEsbuild()
     const result = await build({
       ...esbuildOptions,
       entryPoints: [filePath],

packages/vite/src/node/optimizer/scan.ts

@@ -10,7 +10,6 @@ import type {
   OnLoadResult,
   Plugin,
 } from 'esbuild'
-import esbuild, { formatMessages, transform } from 'esbuild'
 import colors from 'picocolors'
 import type { ResolvedConfig } from '..'
 import {
@@ -24,6 +23,7 @@ import {
   createDebugger,
   dataUrlRE,
   externalRE,
+  importEsbuild,
   isInNodeModules,
   isObject,
   isOptimizable,
@@ -135,6 +135,7 @@ export function scanImports(config: ResolvedConfig): {
 
   `)
       if (e.errors) {
+        const { formatMessages } = await importEsbuild()
         const msgs = await formatMessages(e.errors, {
           kind: 'error',
           color: true,
@@ -216,7 +217,9 @@ async function prepareEsbuildScanner(
   const { plugins = [], ...esbuildOptions } =
     config.optimizeDeps?.esbuildOptions ?? {}
 
-  return await esbuild.context({
+  return await (
+    await importEsbuild()
+  ).context({
     absWorkingDir: process.cwd(),
     write: false,
     stdin: {
@@ -315,6 +318,7 @@ function esbuildScanPlugin(
     let transpiledContents
     // transpile because `transformGlobImport` only expects js
     if (loader !== 'js') {
+      const { transform } = await importEsbuild()
       transpiledContents = (await transform(contents, { loader })).code
     } else {
       transpiledContents = contents

packages/vite/src/node/plugins/css.ts

@@ -22,7 +22,6 @@ import type Less from 'less'
 import type { Alias } from 'dep-types/alias'
 import type { LightningCSSOptions } from 'dep-types/lightningcss'
 import type { TransformOptions } from 'esbuild'
-import { formatMessages, transform } from 'esbuild'
 import type { RawSourceMap } from '@ampproject/remapping'
 import { getCodeWithSourcemap, injectSourcesContent } from '../server/sourcemap'
 import type { ModuleNode } from '../server/moduleGraph'
@@ -52,6 +51,7 @@ import {
   generateCodeFrame,
   getHash,
   getPackageManagerCommand,
+  importEsbuild,
   injectQuery,
   isDataUrl,
   isExternalUrl,
@@ -1723,6 +1723,8 @@ async function minifyCSS(
     // LightningCSS output does not return a linebreak at the end
     return code.toString() + (inlined ? '' : '\n')
   }
+
+  const { formatMessages, transform } = await importEsbuild()
   try {
     const { code, warnings } = await transform(css, {
       loader: 'css',

packages/vite/src/node/plugins/define.ts

@@ -1,7 +1,6 @@
-import { transform } from 'esbuild'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
-import { escapeRegex, getHash } from '../utils'
+import { escapeRegex, getHash, importEsbuild } from '../utils'
 import { isCSSRequest } from './css'
 import { isHTMLRequest } from './html'
 
@@ -148,6 +147,7 @@ export async function replaceDefine(
 
   const esbuildOptions = config.esbuild || {}
 
+  const { transform } = await importEsbuild()
   const result = await transform(code, {
     loader: 'js',
     charset: esbuildOptions.charset ?? 'utf8',

packages/vite/src/node/plugins/esbuild.ts

@@ -6,7 +6,6 @@ import type {
   TransformOptions,
   TransformResult,
 } from 'esbuild'
-import { transform } from 'esbuild'
 import type { RawSourceMap } from '@ampproject/remapping'
 import type { InternalModuleFormat, SourceMap } from 'rollup'
 import type { TSConfckParseResult } from 'tsconfck'
@@ -18,6 +17,7 @@ import {
   createFilter,
   ensureWatchedFile,
   generateCodeFrame,
+  importEsbuild,
 } from '../utils'
 import type { ViteDevServer } from '../server'
 import type { ResolvedConfig } from '../config'
@@ -173,6 +173,7 @@ export async function transformWithEsbuild(
   delete resolvedOptions.jsxInject
 
   try {
+    const { transform } = await importEsbuild()
     const result = await transform(code, resolvedOptions)
     let map: SourceMap
     if (inMap && resolvedOptions.sourcemap) {

packages/vite/src/node/publicUtils.ts

@@ -4,14 +4,19 @@
  * Please control the side-effects by checking the ./dist/node-cjs/publicUtils.cjs bundle
  */
 export { VERSION as version } from './constants'
-export { version as esbuildVersion } from 'esbuild'
-export { VERSION as rollupVersion } from 'rollup'
 export {
   splitVendorChunkPlugin,
   splitVendorChunk,
   isCSSRequest,
 } from './plugins/splitVendorChunk'
-export { normalizePath, mergeConfig, mergeAlias, createFilter } from './utils'
+export {
+  normalizePath,
+  mergeConfig,
+  mergeAlias,
+  createFilter,
+  esbuildVersion,
+  rollupVersion,
+} from './utils'
 export { send } from './server/send'
 export { createLogger } from './logger'
 export { searchForWorkspaceRoot } from './server/searchRoot'

packages/vite/src/node/server/pluginContainer.ts

@@ -32,7 +32,6 @@ SOFTWARE.
 import fs from 'node:fs'
 import { join } from 'node:path'
 import { performance } from 'node:perf_hooks'
-import { VERSION as rollupVersion } from 'rollup'
 import { parseAst as rollupParseAst } from 'rollup/parseAst'
 import type {
   AsyncPluginHooks,
@@ -74,6 +73,7 @@ import {
   normalizePath,
   numberToPos,
   prettifyUrl,
+  rollupVersion,
   timeFrom,
   unwrapId,
 } from '../utils'

packages/vite/src/node/utils.ts

@@ -41,6 +41,26 @@ import {
 } from './packages'
 import type { CommonServerOptions } from '.'
 
+// Cache lazy loaded esbuild import to avoid the extra cost of the import resolution on hot paths
+// Only keep the functions we use to avoid keeping the promise and the entire module in memory
+type EsbuildModule = typeof import('esbuild')
+type EsbuildFunctions = Pick<
+  EsbuildModule,
+  'build' | 'transform' | 'context' | 'formatMessages'
+>
+let esbuildFunctions: EsbuildFunctions | Promise<EsbuildFunctions>
+export async function importEsbuild(): Promise<EsbuildFunctions> {
+  if (esbuildFunctions) {
+    return esbuildFunctions
+  }
+  esbuildFunctions = import('esbuild').then((esbuild) => {
+    const { build, transform, context, formatMessages } = esbuild
+    esbuildFunctions = { build, transform, context, formatMessages }
+    return esbuildFunctions
+  })
+  return esbuildFunctions
+}
+
 /**
  * Inlined to keep `@rollup/pluginutils` in devDependencies
  */
@@ -162,6 +182,17 @@ export const deepImportRE = /^([^@][^/]*)\/|^(@[^/]+\/[^/]+)\//
 // TODO: use import()
 const _require = createRequire(import.meta.url)
 
+export function resolveDependencyVersion(
+  dep: string,
+  pkgRelativePath = '../../package.json',
+): string {
+  const pkgPath = path.resolve(_require.resolve(dep), pkgRelativePath)
+  return JSON.parse(fs.readFileSync(pkgPath, 'utf-8')).version
+}
+
+export const rollupVersion = resolveDependencyVersion('rollup')
+export const esbuildVersion = resolveDependencyVersion('esbuild')
+
 // set in bin/vite.js
 const filter = process.env.VITE_DEBUG_FILTER