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

依赖优化

Remix 在开发环境中引入了自动依赖优化，位于 future.unstable_optimizeDeps 未来标记 后面。这使您可以选择使用此行为，该行为最终将在 Remix 的未来某个版本中成为默认行为——也就是 React Router (1，2)。此标记旨在在 React Router v7 中保持“不稳定”，因为有一些额外的与捆绑相关的 작업이 진행되고 있으며 이는 이 标记的采用。一旦 v7 中的这项工作完成，我们计划稳定该标记。

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

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

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

疑难解答

无法解析包的入口

✘ [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
[email protected]
node_modules/jimp
  jimp@"^0.16.1" from [email protected]
  node_modules/svg2img
    svg2img@"^1.0.0-beta.2" from the root project

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

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