refactor: opt-in optimizeDeps during build and SSR (#8965)

docs/guide/migration.md

@@ -31,26 +31,12 @@ A small fraction of users will now require using [@vitejs/plugin-legacy](https:/
 
 This section describes the biggest architecture changes in Vite v3. To allow projects to migrate from v2 in case of a compat issue, legacy options have been added to revert to the Vite v2 strategies.
 
-:::warning
-These options are marked as experimental and deprecated. They may be removed in a future v3 minor without respecting semver. Please pin the Vite version when using them.
-
-- `legacy.buildRollupPluginCommonjs`
-- `legacy.buildSsrCjsExternalHeuristics`
-
-:::
-
 ### Dev Server Changes
 
 Vite's default dev server port is now 5173. You can use [`server.port`](../config/server-options.md#server-port) to set it to 3000.
 
 Vite's default dev server host is now `localhost`. You can use [`server.host`](../config/server-options.md#server-host) to set it to `127.0.0.1`.
 
-### Build Changes
-
-In v3, Vite uses esbuild to optimize dependencies by default. Doing so, it removes one of the most significant differences between dev and prod present in v2. Because esbuild converts CJS-only dependencies to ESM, [`@rollupjs/plugin-commonjs`](https://github.com/rollup/plugins/tree/master/packages/commonjs) is no longer used.
-
-If you need to get back to the v2 strategy, you can use `legacy.buildRollupPluginCommonjs`.
-
 ### SSR Changes
 
 Vite v3 uses ESM for the SSR build by default. When using ESM, the [SSR externalization heuristics](https://vitejs.dev/guide/ssr.html#ssr-externals) are no longer needed. By default, all dependencies are externalized. You can use [`ssr.noExternal`](../config/ssr-options.md#ssr-noexternal) to control what dependencies to include in the SSR bundle.
@@ -114,6 +100,15 @@ export default {
 }
 ```
 
+## Experimental
+
+### Using esbuild deps optimization at build time
+
+In v3, Vite allows the use of esbuild to optimize dependencies during build time. If enabled, it removes one of the most significant differences between dev and prod present in v2. [`@rollupjs/plugin-commonjs`](https://github.com/rollup/plugins/tree/master/packages/commonjs) is no longer needed in this case since esbuild converts CJS-only dependencies to ESM.
+
+If you want to try this build strategy, you can use `optimizeDeps.disabled: false` (the default in v3 is `disabled: 'build'`). `@rollup/plugin-commonjs`
+can be removed by passing `build.commonjsOptions: { include: [] }`
+
 ## Advanced
 
 There are some changes which only affects plugin/tool creators.

package.json

@@ -21,7 +21,7 @@
     "test": "run-s test-unit test-serve test-build",
     "test-serve": "vitest run -c vitest.config.e2e.ts",
     "test-build": "cross-env VITE_TEST_BUILD=1 vitest run -c vitest.config.e2e.ts",
-    "test-build-legacy-cjs": "cross-env VITE_TEST_LEGACY_CJS_PLUGIN=1 pnpm test-build",
+    "test-build-without-plugin-commonjs": "cross-env VITE_TEST_WITHOUT_PLUGIN_COMMONJS=1 pnpm test-build",
     "test-unit": "vitest run",
     "test-docs": "pnpm run docs-build",
     "debug-serve": "cross-env VITE_DEBUG_SERVE=1 vitest run -c vitest.config.e2e.ts",

packages/vite/src/node/build.ts

@@ -297,14 +297,15 @@ export function resolveBuildPlugins(config: ResolvedConfig): {
   post: Plugin[]
 } {
   const options = config.build
-
+  const { commonjsOptions } = options
+  const usePluginCommonjs =
+    !Array.isArray(commonjsOptions?.include) ||
+    commonjsOptions?.include.length !== 0
   return {
     pre: [
       ...(options.watch ? [ensureWatchPlugin()] : []),
       watchPackageDataPlugin(config),
-      ...(config.legacy?.buildRollupPluginCommonjs
-        ? [commonjsPlugin(options.commonjsOptions)]
-        : []),
+      ...(usePluginCommonjs ? [commonjsPlugin(options.commonjsOptions)] : []),
       dataURIPlugin(),
       assetImportMetaUrlPlugin(config),
       ...(options.rollupOptions.plugins

packages/vite/src/node/config.ts

@@ -280,14 +280,6 @@ export interface ExperimentalOptions {
 }
 
 export interface LegacyOptions {
-  /**
-   * Revert vite build to the v2.9 strategy. Disable esbuild deps optimization and adds `@rollup/plugin-commonjs`
-   *
-   * @experimental
-   * @deprecated
-   * @default false
-   */
-  buildRollupPluginCommonjs?: boolean
   /**
    * Revert vite build --ssr to the v2.9 strategy. Use CJS SSR build and v2.9 externalization heuristics
    *
@@ -571,11 +563,14 @@ export async function resolveConfig(
 
   const optimizeDeps = config.optimizeDeps || {}
 
-  if (process.env.VITE_TEST_LEGACY_CJS_PLUGIN) {
-    config.legacy = {
-      ...config.legacy,
-      buildRollupPluginCommonjs: true
-    }
+  if (process.env.VITE_TEST_WITHOUT_PLUGIN_COMMONJS) {
+    config.build ??= {}
+    config.build.commonjsOptions = { include: [] }
+    config.optimizeDeps ??= {}
+    config.optimizeDeps.disabled = false
+    config.ssr ??= {}
+    config.ssr.optimizeDeps ??= {}
+    config.ssr.optimizeDeps.disabled = false
   }
 
   const BASE_URL = resolvedBase
@@ -616,14 +611,15 @@ export async function resolveConfig(
     packageCache: new Map(),
     createResolver,
     optimizeDeps: {
+      disabled: 'build',
       ...optimizeDeps,
       esbuildOptions: {
         preserveSymlinks: config.resolve?.preserveSymlinks,
         ...optimizeDeps.esbuildOptions
       }
     },
     worker: resolvedWorkerOptions,
-    appType: config.appType ?? middlewareMode === 'ssr' ? 'custom' : 'spa',
+    appType: config.appType ?? (middlewareMode === 'ssr' ? 'custom' : 'spa'),
     experimental: {
       importGlobRestoreExtension: false,
       hmrPartialAccept: false,
@@ -661,21 +657,6 @@ export async function resolveConfig(
     )
   }
 
-  if (resolved.legacy?.buildRollupPluginCommonjs) {
-    const optimizerDisabled = resolved.optimizeDeps.disabled
-    if (!optimizerDisabled) {
-      resolved.optimizeDeps.disabled = 'build'
-    } else if (optimizerDisabled === 'dev') {
-      resolved.optimizeDeps.disabled = true // Also disabled during build
-    }
-    const ssrOptimizerDisabled = resolved.ssr.optimizeDeps.disabled
-    if (!ssrOptimizerDisabled) {
-      resolved.ssr.optimizeDeps.disabled = 'build'
-    } else if (ssrOptimizerDisabled === 'dev') {
-      resolved.ssr.optimizeDeps.disabled = true // Also disabled during build
-    }
-  }
-
   // Some plugins that aren't intended to work in the bundling of workers (doing post-processing at build time for example).
   // And Plugins may also have cached that could be corrupted by being used in these extra rollup calls.
   // So we need to separate the worker plugin from the plugin that vite needs to run.

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

@@ -564,8 +564,7 @@ export async function runOptimizeDeps(
         rollupOptionsExternal.some((ext) => typeof ext !== 'string')
       ) {
         throw new Error(
-          `[vite] 'build.rollupOptions.external' can only be an array of strings or a string.\n` +
-            `You can turn on 'legacy.buildRollupPluginCommonjs' to support more advanced options.`
+          `[vite] 'build.rollupOptions.external' can only be an array of strings or a string when using esbuild optimization at build time.`
         )
       }
       external.push(...(rollupOptionsExternal as string[]))

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

@@ -61,6 +61,7 @@ export function resolveSSROptions(
     target,
     ...ssr,
     optimizeDeps: {
+      disabled: true,
       ...optimizeDeps,
       esbuildOptions: {
         preserveSymlinks,

playground/import-assertion/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    commonjsOptions: {
+      include: []
+    }
+  },
+  optimizeDeps: {
+    disabled: false
+  }
+})

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -105,14 +105,11 @@ test('vue + vuex', async () => {
 
 // When we use the Rollup CommonJS plugin instead of esbuild prebundling,
 // the esbuild plugins won't apply to dependencies
-test.skipIf(isBuild && process.env.VITE_TEST_LEGACY_CJS_PLUGIN)(
-  'esbuild-plugin',
-  async () => {
-    expect(await page.textContent('.esbuild-plugin')).toMatch(
-      `Hello from an esbuild plugin`
-    )
-  }
-)
+test('esbuild-plugin', async () => {
+  expect(await page.textContent('.esbuild-plugin')).toMatch(
+    `Hello from an esbuild plugin`
+  )
+})
 
 test('import from hidden dir', async () => {
   expect(await page.textContent('.hidden-dir')).toBe('hello!')

playground/optimize-deps/vite.config.js

@@ -14,8 +14,8 @@ module.exports = {
       'node:url': 'url'
     }
   },
-
   optimizeDeps: {
+    disabled: false,
     include: [
       'dep-linked-include',
       'nested-exclude > nested-include',
@@ -44,7 +44,11 @@ module.exports = {
 
   build: {
     // to make tests faster
-    minify: false
+    minify: false,
+    // Avoid @rollup/plugin-commonjs
+    commonjsOptions: {
+      include: []
+    }
   },
 
   plugins: [

playground/ssr-deps/server.js

@@ -36,16 +36,10 @@ export async function createServer(root = process.cwd(), hmrPort) {
     appType: 'custom',
     ssr: {
       noExternal: ['no-external-cjs', 'import-builtin-cjs', 'no-external-css'],
-      external: ['nested-external']
-    },
-    optimizeDeps: {
-      include: [
-        'no-external-cjs',
-        'import-builtin-cjs',
-        'optimized-with-nested-external',
-        'optimized-cjs-with-nested-external'
-      ],
-      exclude: ['nested-external']
+      external: ['nested-external'],
+      optimizeDeps: {
+        disabled: 'build'
+      }
     }
   })
   // use vite's connect instance as middleware