コード分割

コード分割は、アプリケーションの様々なページを小さなバンドルに分割し、新しいページにアクセスしたときにオンデマンドでロードします。 これにより、ブラウザが最初にロードするJavaScriptバンドルのサイズを大幅に削減し、初回レンダリングまでの時間を短縮できます。

コード分割は非常に大規模なプロジェクトでは有効ですが、新しいページにアクセスするたびに余分なリクエストが必要になります。一般的に、単一のバンドルを使用できる場合、アプリの動作はより軽快になります。

コード分割を有効にするには、createInertiaApp() 設定内の resolve コールバックを調整する必要があります。この方法は、使用しているバンドラーによって異なります。 createInertiaApp() 設定内のresolveコールバックを調整する必要があります。具体的な方法は使用するバンドラーによって異なります。

Viteを使用する場合

Viteは、import.meta.glob() 関数を使用する場合、デフォルトでコード分割（または遅延読み込み）を有効にします。 { eager: true } オプションを省略するか、false に設定して、先行読み込みを無効にします。 先行ロードを無効にするには、`{ 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プラグインを使用して動的インポートを有効にする必要があります。 今すぐインストールしましょう。 動的インポートを有効にするには、Babelプラグインが必要です。インストールしてください。

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

次に、以下の設定でプロジェクトに .babelrc ファイルを作成します。

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

最後に、アプリの初期化コードで resolve コールバックを更新して、require の代わりに import を使用します。`require` の代わりに `import` を使用するように、アプリケーションの初期化コードにある `resolve` コールバックを更新してください。

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

また、キャッシュバスティングを使用して、ブラウザがアセットの最新バージョンを強制的にロードするようにすることを検討する必要があります。 これを実現するには、webpack設定ファイルに次の設定を追加します。

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