Dependency optimization

此功能仅影响开发。它不会影响生产版本。

依赖优化

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

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

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

更多详细信息，请参阅 Vite 的 Dep 优化选项。

故障排除

`无法解析包条目`

✘ [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"],
  },
});