Thinkstream

コード分割は、アプリケーションのさまざまなページを小さなバンドルに分割し、新しいページにアクセスしたときに必要に応じて読み込む仕組みです。これにより、ブラウザが最初に読み込む JavaScript バンドルのサイズを大幅に削減でき、初回レンダリングまでの時間が改善されます。

コード分割は非常に大規模なプロジェクトでは有用ですが、新しいページを訪れるたびに追加のリクエストが発生します。一般的に言えば、単一のバンドルを使用できる場合、その方がアプリはより軽快に感じられるでしょう。

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

Vite を使用する場合

Vite は、import.meta.glob() 関数を使用すると、デフォルトでコード分割（Vite では「遅延読み込み」と呼ばれています）を有効にします。そのため、{ eager: true } オプションを省略するか、false に設定して、即時読み込みを無効にするだけで構いません。

Webpack を使用する場合

Webpack でコード分割を使用するには、まず Babel プラグインを使って dynamic imports を有効にする必要があります。では、インストールしましょう。

bash

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

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

json

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

Laravel Mix を使用している場合、dynamic imports 用の Babel プラグインはすでにインストールおよび設定されているため、これらの手順は省略できます。既知の問題があるため、Laravel Mix 6 以降の使用を推奨します。

最後に、アプリ初期化コード内の resolve コールバックを更新し、require の代わりに import を使用します。

また、ブラウザに最新のアセットを強制的に読み込ませるために、キャッシュバスティングの使用も検討してください。これを実現するには、webpack の設定ファイルに以下の設定を追加します。

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