此功能仅影响开发环境，不影响生产环境。

依赖优化

¥Dependency optimization

Remix 在 future.unstable_optimizeDeps 和未来标志的开发过程中引入了自动依赖优化。这允许你选择启用此行为，该行为最终将成为 Remix 未来版本（又名 React Router（1、2））的默认行为。此标志旨在在 React Router v7 中保留 "unstable" 的版本，因为即将进行一些额外的打包相关工作，以简化该标志的采用。我们计划在 v7 中完成这项工作后稳定该标志。

¥Remix introduced automatic dependency optimization in development behind the future.unstable_optimizeDeps Future Flag. This allows you to opt-into this behavior, which will eventually become the default in some future version of Remix — a.k.a. React Router (1, 2). This flag is intended to remain "unstable" into React Router v7 as there is some additional bundling-related work coming that will ease adoption of the flag. We plan to stabilize the flag once that work is completed in v7.

在开发过程中，Vite 的目标是将预打包依赖升级到能够高效地按需提供这些依赖。为此，Vite 需要知道从哪里开始抓取应用的模块图来查找依赖。

¥In development, Vite aims to prebundle dependencies so that it can efficiently serve up those dependencies on-demand. To do this, Vite needs to know where to start crawling your app's module graph to look for dependencies.

以前，Remix 不会通知 Vite 在路由模块或客户端入口处启动依赖检测。这意味着在开发过程中，当你在应用中导航时，Vite 会遇到新的依赖，从而导致 504 Outdated Dependency 错误。因此，开发体验有时会很卡顿，因为这些错误可能会导致 HMR 中断或链接导航中止。导航也可能感觉迟缓，因为交互处理依赖有时会很慢。

¥Previously, Remix did not inform Vite to start dependency detection at route modules nor at the client entry. That meant that in development, Vite would encounter new dependencies as you navigated around in your app resulting in 504 Outdated Dependency errors. Consequently, the development experience could feel janky at times since those errors could cause HMR to break or link navigations to be aborted. Navigation could also feel sluggish as processing dependencies interactively could sometimes be slow.

有关更多信息，请参阅 Vite 依赖优化选项。

¥For more information, see Vite's Dep Optimization Options.

故障排除

¥Troubleshooting

`Failed to resolve entry for package`

✘ [ERROR] Failed to resolve entry for package "<package>". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]

这通常是由于依赖配置错误造成的。你可以使用 publint 来检查有问题的软件包是否配置错误。要修复此问题，你需要使用 npm why 或 pnpm why 来确定要将哪些直接依赖添加到 optimizeDeps.exclude。

¥This is usually caused by a misconfigured dependency. You use publint to check if the offending package is misconfigured. To fix the issue, you'll need to use npm why or pnpm why to determine which of your direct dependencies to add to optimizeDeps.exclude.

例如，假设你的应用遇到此错误：

¥For example, let's say your app is running into this error:

✘ [ERROR] Failed to resolve entry for package "jimp". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]

果然，publint 报告了 jimp 包配置错误。然后，你确定 jimp 是间接依赖，并被 svg2img 直接依赖拉入：

¥Sure enough, publint reports that the jimp package is misconfigured. Then, you determine that jimp is an indirect dependency being pulled in by your svg2img direct dependency:

❯ npm why jimp
jimp@0.16.13
node_modules/jimp
  jimp@"^0.16.1" from svg2img@1.0.0-beta.2
  node_modules/svg2img
    svg2img@"^1.0.0-beta.2" from the root project

最后，将 svg2img 添加到 optimizeDeps.exclude，这应该可以解决问题：

¥Finally, you add svg2img to optimizeDeps.exclude, which should fix the issue:

export default defineConfig({
  optimizeDeps: {
    exclude: ["svg2img"],
  },
});