程式碼分割

程式碼分割將您的應用程式的各個頁面分解為較小的捆綁包，然後在訪問新頁面時按需載入。這可以顯著減少瀏覽器載入的初始 JavaScript 捆綁包的大小，從而縮短首次渲染的時間。

雖然程式碼分割對於非常大的專案很有幫助，但訪問新頁面時確實需要額外的請求。一般來說，如果您能夠使用單個捆綁包，您的應用程式將會感覺更敏捷。

要啟用程式碼分割，您需要在您的 createInertiaApp() 配置中調整 resolve 回呼，而具體如何操作取決於您使用的捆綁器。 createInertiaApp() 設定，而具體做法會因您使用的打包工具而有所不同。

使用 Vite

當使用 Vite 的 import.meta.glob() 函式時，Vite 預設啟用程式碼分割（或他們稱之為延遲載入），因此只需省略 { eager: true } 選項，或將其設定為 false，即可停用預先載入。 import.meta.glob() 函式時，Vite 預設會啟用程式碼分割（或他們稱之為延遲載入）。因此，只需省略 { eager: true } 選項，或將其設定為 false，即可停用預先載入。

  resolve: name => {
-   const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
-   return pages[`./Pages/${name}.vue`]
+   const pages = import.meta.glob('./Pages/**/*.vue')
+   return pages[`./Pages/${name}.vue`]()
  },

使用 Webpack

若要搭配 Webpack 使用程式碼分割，您首先需要透過 Babel 外掛啟用 動態匯入。讓我們現在安裝它。

npm install @babel/plugin-syntax-dynamic-import

接著，在您的專案中建立一個 .babelrc 檔案，並使用以下設定

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

最後，更新您應用程式初始化程式碼中的 resolve 回呼，以使用 import來取代 require。

- resolve: name => require(`./Pages/${name}`),
+ resolve: name => import(`./Pages/${name}`),

您還應該考慮使用快取失效，以強制瀏覽器載入最新版本的資產。若要達成此目的，請將以下設定新增至您的 Webpack 設定檔。

output: {
  chunkFilename: 'js/[name].js?id=[chunkhash]',
}