diff --git a/.changeset/hot-dingos-attend.md b/.changeset/hot-dingos-attend.md new file mode 100644 index 00000000000..6122e6e836e --- /dev/null +++ b/.changeset/hot-dingos-attend.md @@ -0,0 +1,5 @@ +--- +"@remix-run/dev": minor +--- + +Stabilize the `future.unstable_optimizeDeps` flag into `future.v3_optimizeDeps` diff --git a/docs/guides/dependency-optimization.md b/docs/guides/dependency-optimization.md index 48877769a3e..a92f9b3733c 100644 --- a/docs/guides/dependency-optimization.md +++ b/docs/guides/dependency-optimization.md @@ -6,7 +6,7 @@ title: Dependency optimization # Dependency optimization -Remix introduced automatic dependency optimization in development behind the `future.unstable_optimizeDeps` [Future Flag][future-flags]. +Remix introduced automatic dependency optimization in development behind the `future.v3_optimizeDeps` [Future Flag][future-flags]. This allows you to opt-into this behavior which will become the default in the next major version of Remix - a.k.a. React Router v7 ([1][rr-v7], [2][rr-v7-2]). In development, Vite aims to [prebundle dependencies][prebundle-dependencies] so that it can efficiently serve up those dependencies on-demand. diff --git a/docs/start/future-flags.md b/docs/start/future-flags.md index 728da129fb0..1356d4937d1 100644 --- a/docs/start/future-flags.md +++ b/docs/start/future-flags.md @@ -472,9 +472,25 @@ You shouldn't need to make any changes to your application code for this feature You may find some usage for the new [``][discover-prop] API if you wish to disable eager route discovery on certain links. -## unstable_optimizeDeps +## v3_optimizeDeps -Opt into automatic [dependency optimization][dependency-optimization] during development. +**Background** + +This flag allows you to opt-into automatic [dependency optimization][dependency-optimization] during development when using Vite. + +👉 **Enable the Flag** + +```ts filename=vite.config.ts +remix({ + future: { + v3_optimizeDeps: true, + }, +}); +``` + +**Update your Code** + +You shouldn't need to make any changes to your application code for this feature to work. [development-strategy]: ../guides/api-development-strategy [fetcherpersist-rfc]: https://github.com/remix-run/remix/discussions/7698 diff --git a/packages/remix-dev/__tests__/readConfig-test.ts b/packages/remix-dev/__tests__/readConfig-test.ts index f528c16f15e..bd06d50309f 100644 --- a/packages/remix-dev/__tests__/readConfig-test.ts +++ b/packages/remix-dev/__tests__/readConfig-test.ts @@ -36,9 +36,9 @@ describe("readConfig", () => { "entryServerFile": "entry.server.tsx", "entryServerFilePath": Any, "future": { - "unstable_optimizeDeps": false, "v3_fetcherPersist": false, "v3_lazyRouteDiscovery": false, + "v3_optimizeDeps": false, "v3_relativeSplatPath": false, "v3_singleFetch": false, "v3_throwAbortReason": false, diff --git a/packages/remix-dev/config.ts b/packages/remix-dev/config.ts index 16065ff01af..b6cb6dd8f01 100644 --- a/packages/remix-dev/config.ts +++ b/packages/remix-dev/config.ts @@ -39,7 +39,7 @@ interface FutureConfig { v3_throwAbortReason: boolean; v3_singleFetch: boolean; v3_lazyRouteDiscovery: boolean; - unstable_optimizeDeps: boolean; + v3_optimizeDeps: boolean; } type NodeBuiltinsPolyfillOptions = Pick< @@ -605,7 +605,7 @@ export async function resolveConfig( v3_throwAbortReason: appConfig.future?.v3_throwAbortReason === true, v3_singleFetch: appConfig.future?.v3_singleFetch === true, v3_lazyRouteDiscovery: appConfig.future?.v3_lazyRouteDiscovery === true, - unstable_optimizeDeps: appConfig.future?.unstable_optimizeDeps === true, + v3_optimizeDeps: appConfig.future?.v3_optimizeDeps === true, }; if (appConfig.future) { diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts index 53ce6400b57..c886f7fcbcf 100644 --- a/packages/remix-dev/vite/plugin.ts +++ b/packages/remix-dev/vite/plugin.ts @@ -1075,7 +1075,7 @@ export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => { : undefined, }, optimizeDeps: { - entries: ctx.remixConfig.future.unstable_optimizeDeps + entries: ctx.remixConfig.future.v3_optimizeDeps ? [ ctx.entryClientFilePath, ...Object.values(ctx.remixConfig.routes).map((route) =>