refactor: optimizeDeps back to top level (#18465)

Author: patak-dev

docs/.vitepress/config.ts

@@ -456,19 +456,13 @@ export default defineConfig({
         },
       }),
     ],
-    environments: {
-      client: {
-        dev: {
-          optimizeDeps: {
-            include: [
-              '@shikijs/vitepress-twoslash/client',
-              'gsap',
-              'gsap/dist/ScrollTrigger',
-              'gsap/dist/MotionPathPlugin',
-            ],
-          },
-        },
-      },
+    optimizeDeps: {
+      include: [
+        '@shikijs/vitepress-twoslash/client',
+        'gsap',
+        'gsap/dist/ScrollTrigger',
+        'gsap/dist/MotionPathPlugin',
+      ],
     },
   },
   buildEnd,

docs/guide/api-environment.md

@@ -38,9 +38,7 @@ export default {
       },
     },
     ssr: {
-      dev: {
-        optimizeDeps: {}, // configure the SSR environment
-      },
+      optimizeDeps: {}, // configure the SSR environment
     },
     rsc: {
       resolve: {
@@ -61,7 +59,7 @@ export default {
 }
 ```
 
-The `EnvironmentOptions` interface exposes all the per-environment options. There are `SharedEnvironmentOptions` that apply to both `build` and `dev`, like `resolve`. And there are `DevEnvironmentOptions` and `BuildEnvironmentOptions` for dev and build specific options (like `dev.optimizeDeps` or `build.outDir`).
+The `EnvironmentOptions` interface exposes all the per-environment options. There are `SharedEnvironmentOptions` that apply to both `build` and `dev`, like `resolve`. And there are `DevEnvironmentOptions` and `BuildEnvironmentOptions` for dev and build specific options (like `optimizeDeps` or `build.outDir`).
 
 ```ts
 interface EnvironmentOptions extends SharedEnvironmentOptions {

packages/vite/src/node/baseEnvironment.ts

@@ -18,6 +18,7 @@ export function getDefaultResolvedEnvironmentOptions(
     resolve: config.resolve,
     consumer: 'server',
     webCompatible: false,
+    optimizeDeps: config.optimizeDeps,
     dev: config.dev,
     build: config.build,
   }

packages/vite/src/node/config.ts

@@ -170,11 +170,6 @@ export interface DevEnvironmentOptions {
     | false
     | ((sourcePath: string, sourcemapPath: string) => boolean)
 
-  /**
-   * Optimize deps config
-   */
-  optimizeDeps?: DepOptimizationOptions
-
   /**
    * create the Dev Environment instance
    */
@@ -251,6 +246,10 @@ export interface SharedEnvironmentOptions {
    * Temporal options, we should remove these in favor of fine-grained control
    */
   webCompatible?: boolean // was ssr.target === 'webworker'
+  /**
+   * Optimize deps config
+   */
+  optimizeDeps?: DepOptimizationOptions
 }
 
 export interface EnvironmentOptions extends SharedEnvironmentOptions {
@@ -271,6 +270,7 @@ export type ResolvedEnvironmentOptions = {
   resolve: ResolvedResolveOptions
   consumer: 'client' | 'server'
   webCompatible: boolean
+  optimizeDeps: DepOptimizationOptions
   dev: ResolvedDevEnvironmentOptions
   build: ResolvedBuildEnvironmentOptions
 }
@@ -589,7 +589,6 @@ export type ResolvedConfig = Readonly<
 
 export function resolveDevEnvironmentOptions(
   dev: DevEnvironmentOptions | undefined,
-  preserverSymlinks: boolean,
   environmentName: string | undefined,
   consumer: 'client' | 'server' | undefined,
   // Backward compatibility
@@ -603,11 +602,6 @@ export function resolveDevEnvironmentOptions(
         : dev?.sourcemapIgnoreList || isInNodeModules,
     preTransformRequests: dev?.preTransformRequests ?? consumer === 'client',
     warmup: dev?.warmup ?? [],
-    optimizeDeps: resolveDepOptimizationOptions(
-      dev?.optimizeDeps,
-      preserverSymlinks,
-      consumer,
-    ),
     createEnvironment:
       dev?.createEnvironment ??
       (environmentName === 'client'
@@ -646,9 +640,13 @@ function resolveEnvironmentOptions(
     resolve,
     consumer,
     webCompatible: options.webCompatible ?? consumer === 'client',
+    optimizeDeps: resolveDepOptimizationOptions(
+      options.optimizeDeps,
+      resolve.preserveSymlinks,
+      consumer,
+    ),
     dev: resolveDevEnvironmentOptions(
       options.dev,
-      resolve.preserveSymlinks,
       environmentName,
       consumer,
       skipSsrTransform,
@@ -911,13 +909,8 @@ export async function resolveConfig(
 
   checkBadCharactersInPath(resolvedRoot, logger)
 
-  // Backward compatibility: merge optimizeDeps into environments.client.dev.optimizeDeps as defaults
   const configEnvironmentsClient = config.environments!.client!
   configEnvironmentsClient.dev ??= {}
-  configEnvironmentsClient.dev.optimizeDeps = mergeConfig(
-    config.optimizeDeps ?? {},
-    configEnvironmentsClient.dev.optimizeDeps ?? {},
-  )
 
   const deprecatedSsrOptimizeDepsConfig = config.ssr?.optimizeDeps ?? {}
   let configEnvironmentsSsr = config.environments!.ssr
@@ -935,10 +928,9 @@ export async function resolveConfig(
 
   // Backward compatibility: merge ssr into environments.ssr.config as defaults
   if (configEnvironmentsSsr) {
-    configEnvironmentsSsr.dev ??= {}
-    configEnvironmentsSsr.dev.optimizeDeps = mergeConfig(
+    configEnvironmentsSsr.optimizeDeps = mergeConfig(
       deprecatedSsrOptimizeDepsConfig,
-      configEnvironmentsSsr.dev.optimizeDeps ?? {},
+      configEnvironmentsSsr.optimizeDeps ?? {},
     )
 
     configEnvironmentsSsr.resolve ??= {}
@@ -972,9 +964,16 @@ export async function resolveConfig(
 
   // Merge default environment config values
   const defaultEnvironmentOptions = getDefaultEnvironmentOptions(config)
+  // Some top level options only apply to the client environment
+  const defaultClientEnvironmentOptions = {
+    ...defaultEnvironmentOptions,
+    optimizeDeps: config.optimizeDeps,
+  }
   for (const name of Object.keys(config.environments)) {
     config.environments[name] = mergeConfig(
-      defaultEnvironmentOptions,
+      name === 'client'
+        ? defaultClientEnvironmentOptions
+        : defaultEnvironmentOptions,
       config.environments[name],
     )
   }
@@ -995,16 +994,15 @@ export async function resolveConfig(
     )
   }
 
-  // Backward compatibility: merge environments.client.dev.optimizeDeps back into optimizeDeps
+  // Backward compatibility: merge environments.client.optimizeDeps back into optimizeDeps
   // The same object is assigned back for backward compatibility. The ecosystem is modifying
   // optimizeDeps in the ResolvedConfig hook, so these changes will be reflected on the
   // client environment.
   const backwardCompatibleOptimizeDeps =
-    resolvedEnvironments.client.dev.optimizeDeps
+    resolvedEnvironments.client.optimizeDeps
 
   const resolvedDevEnvironmentOptions = resolveDevEnvironmentOptions(
     config.dev,
-    resolvedDefaultResolve.preserveSymlinks,
     // default environment options
     undefined,
     undefined,
@@ -1022,7 +1020,7 @@ export async function resolveConfig(
     ...config.ssr,
     external: resolvedEnvironments.ssr?.resolve.external,
     noExternal: resolvedEnvironments.ssr?.resolve.noExternal,
-    optimizeDeps: resolvedEnvironments.ssr?.dev?.optimizeDeps,
+    optimizeDeps: resolvedEnvironments.ssr?.optimizeDeps,
     resolve: {
       ...config.ssr?.resolve,
       conditions: resolvedEnvironments.ssr?.resolve.conditions,
@@ -1230,10 +1228,9 @@ export async function resolveConfig(
     },
     future: config.future,
 
-    // Backward compatibility, users should use environment.config.dev.optimizeDeps
-    optimizeDeps: backwardCompatibleOptimizeDeps,
     ssr,
 
+    optimizeDeps: backwardCompatibleOptimizeDeps,
     resolve: resolvedDefaultResolve,
     dev: resolvedDevEnvironmentOptions,
     build: resolvedBuildOptions,

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

@@ -53,7 +53,7 @@ export function esbuildDepPlugin(
   external: string[],
 ): Plugin {
   const { isProduction } = environment.config
-  const { extensions } = environment.config.dev.optimizeDeps
+  const { extensions } = environment.config.optimizeDeps
 
   // remove optimizable extensions from `externalTypes` list
   const allExternalTypes = extensions

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

@@ -288,7 +288,7 @@ export async function optimizeExplicitEnvironmentDeps(
 ): Promise<DepOptimizationMetadata> {
   const cachedMetadata = await loadCachedDepOptimizationMetadata(
     environment,
-    environment.config.dev.optimizeDeps.force ?? false,
+    environment.config.optimizeDeps.force ?? false,
     false,
   )
   if (cachedMetadata) {
@@ -729,7 +729,7 @@ async function prepareEsbuildOptimizerRun(
   const flatIdDeps: Record<string, string> = {}
   const idToExports: Record<string, ExportsData> = {}
 
-  const { optimizeDeps } = environment.config.dev
+  const { optimizeDeps } = environment.config
 
   const { plugins: pluginsFromConfig = [], ...esbuildOptions } =
     optimizeDeps?.esbuildOptions ?? {}
@@ -812,7 +812,7 @@ export async function addManuallyIncludedOptimizeDeps(
   deps: Record<string, string>,
 ): Promise<void> {
   const { logger } = environment
-  const { optimizeDeps } = environment.config.dev
+  const { optimizeDeps } = environment.config
   const optimizeDepsInclude = optimizeDeps?.include ?? []
   if (optimizeDepsInclude.length) {
     const unableToOptimize = (id: string, msg: string) => {
@@ -1059,7 +1059,7 @@ export async function extractExportsData(
 ): Promise<ExportsData> {
   await init
 
-  const { optimizeDeps } = environment.config.dev
+  const { optimizeDeps } = environment.config
 
   const esbuildOptions = optimizeDeps?.esbuildOptions ?? {}
   if (optimizeDeps.extensions?.some((ext) => filePath.endsWith(ext))) {
@@ -1112,7 +1112,7 @@ function needsInterop(
   exportsData: ExportsData,
   output?: { exports: string[] },
 ): boolean {
-  if (environment.config.dev.optimizeDeps?.needsInterop?.includes(id)) {
+  if (environment.config.optimizeDeps?.needsInterop?.includes(id)) {
     return true
   }
   const { hasModuleSyntax, exports } = exportsData
@@ -1156,7 +1156,7 @@ function getConfigHash(environment: Environment): string {
   // Take config into account
   // only a subset of config options that can affect dep optimization
   const { config } = environment
-  const { optimizeDeps } = config.dev
+  const { optimizeDeps } = config
   const content = JSON.stringify(
     {
       mode: process.env.NODE_ENV || config.mode,

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

@@ -44,7 +44,7 @@ export function createDepsOptimizer(
 
   let closed = false
 
-  const options = environment.config.dev.optimizeDeps
+  const options = environment.config.optimizeDeps
 
   const { noDiscovery, holdUntilCrawlEnd } = options
 
@@ -748,7 +748,7 @@ export function createExplicitDepsOptimizer(
     run: () => {},
 
     close: async () => {},
-    options: environment.config.dev.optimizeDeps,
+    options: environment.config.optimizeDeps,
   }
 
   let inited = false

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

@@ -147,7 +147,7 @@ export function scanImports(environment: ScanEnvironment): {
     entries = computedEntries
 
     if (!entries.length) {
-      if (!config.optimizeDeps.entries && !config.dev.optimizeDeps.include) {
+      if (!config.optimizeDeps.entries && !config.optimizeDeps.include) {
         environment.logger.warn(
           colors.yellow(
             '(!) Could not auto-determine entry point from rollupOptions or html files ' +
@@ -247,7 +247,7 @@ export function scanImports(environment: ScanEnvironment): {
 async function computeEntries(environment: ScanEnvironment) {
   let entries: string[] = []
 
-  const explicitEntryPatterns = environment.config.dev.optimizeDeps.entries
+  const explicitEntryPatterns = environment.config.optimizeDeps.entries
   const buildInput = environment.config.build.rollupOptions?.input
 
   if (explicitEntryPatterns) {
@@ -283,7 +283,7 @@ async function computeEntries(environment: ScanEnvironment) {
   // dependencies.
   entries = entries.filter(
     (entry) =>
-      isScannable(entry, environment.config.dev.optimizeDeps.extensions) &&
+      isScannable(entry, environment.config.optimizeDeps.extensions) &&
       fs.existsSync(entry),
   )
 
@@ -302,7 +302,7 @@ async function prepareEsbuildScanner(
   const plugin = esbuildScanPlugin(environment, deps, missing, entries)
 
   const { plugins = [], ...esbuildOptions } =
-    environment.config.dev.optimizeDeps.esbuildOptions ?? {}
+    environment.config.optimizeDeps.esbuildOptions ?? {}
 
   // The plugin pipeline automatically loads the closest tsconfig.json.
   // But esbuild doesn't support reading tsconfig.json if the plugin has resolved the path (https://github.com/evanw/esbuild/issues/2265).
@@ -356,7 +356,7 @@ function globEntries(pattern: string | string[], environment: ScanEnvironment) {
       '**/node_modules/**',
       `**/${environment.config.build.outDir}/**`,
       // if there aren't explicit entries, also ignore other common folders
-      ...(environment.config.dev.optimizeDeps.entries
+      ...(environment.config.optimizeDeps.entries
         ? []
         : [`**/__tests__/**`, `**/coverage/**`]),
     ],
@@ -409,7 +409,7 @@ function esbuildScanPlugin(
     return res
   }
 
-  const optimizeDepsOptions = environment.config.dev.optimizeDeps
+  const optimizeDepsOptions = environment.config.optimizeDeps
   const include = optimizeDepsOptions.include
   const exclude = [
     ...(optimizeDepsOptions.exclude ?? []),

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

@@ -40,7 +40,7 @@ export async function resolvePlugins(
   const depOptimizationEnabled =
     !isBuild &&
     Object.values(config.environments).some(
-      (environment) => !isDepOptimizationDisabled(environment.dev.optimizeDeps),
+      (environment) => !isDepOptimizationDisabled(environment.optimizeDeps),
     )
 
   return [

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

@@ -243,7 +243,7 @@ export function resolvePlugin(
         scan: resolveOpts?.scan ?? resolveOptions.scan,
       }
 
-      const depsOptimizerOptions = this.environment.config.dev.optimizeDeps
+      const depsOptimizerOptions = this.environment.config.optimizeDeps
 
       const resolvedImports = resolveSubpathImports(id, importer, options)
       if (resolvedImports) {

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

@@ -131,7 +131,7 @@ export class DevEnvironment extends BaseEnvironment {
       })
     })
 
-    const { optimizeDeps } = this.config.dev
+    const { optimizeDeps } = this.config
     if (context.depsOptimizer) {
       this.depsOptimizer = context.depsOptimizer
     } else if (isDepOptimizationDisabled(optimizeDeps)) {

playground/environment-react-ssr/vite.config.ts

@@ -33,10 +33,8 @@ export default defineConfig((env) => ({
       },
     },
     ssr: {
-      dev: {
-        optimizeDeps: {
-          noDiscovery: false,
-        },
+      optimizeDeps: {
+        noDiscovery: false,
       },
       build: {
         outDir: 'dist/server',