此功能仅影响开发环境。它不会影响生产构建。

依赖项优化

Remix 在开发环境中引入了自动依赖项优化，该优化功能在 future.unstable_optimizeDeps Future Flag 背后。 您可以选择启用此行为，该行为最终将在 Remix 的未来版本（即 React Router (1, 2)）中成为默认行为。 此标志旨在在 React Router v7 中保持“不稳定”状态，因为即将进行一些额外的与捆绑相关的工作，这将简化标志的采用。 我们计划在该工作在 v7 中完成后稳定该标志。

在开发中，Vite 的目标是预捆绑依赖项，以便它可以按需高效地提供这些依赖项。 为此，Vite 需要知道从哪里开始抓取您应用程序的模块图，以查找依赖项。

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

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

故障排除

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 的直接依赖项。

例如，假设您的应用程序遇到此错误

✘ [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 直接依赖项引入的间接依赖项

❯ 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，这应该可以解决问题

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