From f8c8cf272345364e8a6181725335e95b957ba8c4 Mon Sep 17 00:00:00 2001 From: patak Date: Fri, 8 Jul 2022 09:46:02 +0200 Subject: [PATCH] refactor: opt-in optimizeDeps during build and SSR (#8965) --- docs/guide/migration.md | 23 +++++------ package.json | 2 +- packages/vite/src/node/build.ts | 9 +++-- packages/vite/src/node/config.ts | 39 +++++-------------- packages/vite/src/node/optimizer/index.ts | 3 +- packages/vite/src/node/ssr/index.ts | 1 + playground/import-assertion/vite.config.js | 12 ++++++ .../__tests__/optimize-deps.spec.ts | 13 +++---- playground/optimize-deps/vite.config.js | 8 +++- playground/ssr-deps/server.js | 14 ++----- 10 files changed, 54 insertions(+), 70 deletions(-) create mode 100644 playground/import-assertion/vite.config.js diff --git a/docs/guide/migration.md b/docs/guide/migration.md index 3153c856ce2e61..9a80580fcf2eb0 100644 --- a/docs/guide/migration.md +++ b/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. diff --git a/package.json b/package.json index 0704bdc7081142..8ef5b2d811cc05 100644 --- a/package.json +++ b/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", diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index f9bfb31a0365b9..973dcef199d8ee 100644 --- a/packages/vite/src/node/build.ts +++ b/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 diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index c06b826132535e..8f16aed9c84917 100644 --- a/packages/vite/src/node/config.ts +++ b/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,6 +611,7 @@ export async function resolveConfig( packageCache: new Map(), createResolver, optimizeDeps: { + disabled: 'build', ...optimizeDeps, esbuildOptions: { preserveSymlinks: config.resolve?.preserveSymlinks, @@ -623,7 +619,7 @@ export async function resolveConfig( } }, 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. diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts index 0798f27e079379..267a59e2f9b39a 100644 --- a/packages/vite/src/node/optimizer/index.ts +++ b/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[])) diff --git a/packages/vite/src/node/ssr/index.ts b/packages/vite/src/node/ssr/index.ts index 0d70e53cccdb5e..7d2e4724f98b44 100644 --- a/packages/vite/src/node/ssr/index.ts +++ b/packages/vite/src/node/ssr/index.ts @@ -61,6 +61,7 @@ export function resolveSSROptions( target, ...ssr, optimizeDeps: { + disabled: true, ...optimizeDeps, esbuildOptions: { preserveSymlinks, diff --git a/playground/import-assertion/vite.config.js b/playground/import-assertion/vite.config.js new file mode 100644 index 00000000000000..13a5b43e3c7946 --- /dev/null +++ b/playground/import-assertion/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + build: { + commonjsOptions: { + include: [] + } + }, + optimizeDeps: { + disabled: false + } +}) diff --git a/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/playground/optimize-deps/__tests__/optimize-deps.spec.ts index b0af6debca526e..a62b4525e057be 100644 --- a/playground/optimize-deps/__tests__/optimize-deps.spec.ts +++ b/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!') diff --git a/playground/optimize-deps/vite.config.js b/playground/optimize-deps/vite.config.js index 0b857173fe1e83..091f994e2c6aec 100644 --- a/playground/optimize-deps/vite.config.js +++ b/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: [ diff --git a/playground/ssr-deps/server.js b/playground/ssr-deps/server.js index 7075cbcacc4d7a..32e6f0c6556509 100644 --- a/playground/ssr-deps/server.js +++ b/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