此功能僅影響開發階段，不會影響生產版本的建置。

相依性最佳化

Remix 在開發階段引入了自動相依性最佳化功能，此功能位於 future.unstable_optimizeDeps 未來標誌之後。您可以選擇啟用此行為，此行為最終會在未來版本的 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"],
  },
});