未表示の機能が初期読み込みに混ざる理由とVercelの実践
Webアプリケーションの開発が進むにつれて、モジュール同士の依存関係は複雑になり、意図しないコードが初期画面の読み込みに含まれてしまうことがあります。2026年10月28日に公開されたNext.js公式ブログのバンドル最適化の実践紹介では、AIエージェントを活用してモジュール間の関係を調査し、不要な初期JavaScriptを削減した事例が報告されました。
Vercelの報告によると、同社のダッシュボード画面（vercel.com）において、Vercel Agentパネルを開いていない状態にもかかわらず、Markdown描画や構文強調、グラフ描画のためのコードが初期アクセス時に配信されていたことが判明しました。この改修により、ダッシュボードページにおいて圧縮後の初期JavaScriptを255 KB削減できたと自己報告されています。この削減量は画面表示時間の改善値を直接示したものではありませんが、初期配信されるコード量を大きく削った一例です。
このような読み込みが発生する背景にあるのは、モジュールの読み込み経路です。たとえば、ある重いコンポーネントに対して遅延読み込み（lazy import）を設定していても、同じバンドル内の別のモジュールが静的なimport経路を残していると、結果として初期読み込みに含まれてしまいます。コンポーネント単体の記述だけでなく、画面全体の依存関係をたどらなければ原因を突き止めるのは困難です。
TurbopackのモジュールグラフとAIエージェントによる調査
こうした課題に対し、Turbopackの詳細なモジュールグラフを活用するスキル「next-bundle-optimizer」が提供されています。モジュールグラフを調べる分析器自体はNext.js 16.1以降で導入されていましたが、このスキルはNext.js 16.4以降で追加された機能です。Turbopackの利用を前提としており、導入にあたってはNext.js 16.4への更新とスキルの追加が案内されています。
AIエージェントはこのスキルを通じてモジュールグラフを照会し、最小カット（minimum cut）の手法を用いて、モジュールを遅延読み込みへ切り離せる境界を特定します。そのうえで、提案された変更がソースコードや画面上の対話操作に矛盾しないかを確認する設計です。
このスキルは既定では問題箇所の特定と修正案の報告のみを行い、勝手にコードを書き換えることはありません。指示としてfixオプションを指定した場合に提案内容を適用し、再分析とスナップショットの比較を行って影響度を測定する流れです。Vercelの実践では、各改修についてエージェントにプルリクエストを作成させ、プレビューデプロイ環境で修正内容を確認してから本番へ出荷したと報告されています。全自動ですべてを任せるのではなく、人間が検証環境で挙動を確かめる手順を踏んでいる点が特徴です。
サーバー側への処理移動とスナップショットの活用
不要なコードを減らすアプローチは、読み込みタイミングを遅らせる遅延importだけではありません。公式ガイド「Optimizing package bundling」（2026年10月15日最終更新）で解説されているように、データをUIへ変換する目的のライブラリは、実行場所を見直す選択肢があります。
たとえば構文強調やグラフ描画、Markdownの解析処理などは、ブラウザ固有のAPIやユーザーの操作イベントを必要としない場合、Server Component側で実行して静的なHTMLとして返すことが可能です。これにより、クライアント側にライブラリ本体のJavaScriptを配信せずに済みます。
また、Next.js 16.4以降で提供されている「next analyze export」コマンドを利用すると、保存された分析スナップショットを再ビルドやサーバー起動なしでJSON Lines形式で出力可能です。既存のスクリプトやAIツールへデータを渡し、改修前後のバンドルサイズの変化を定量的に比較する材料として役立ちます。
受注管理画面を例にした業務システムへの適用判断
この進め方は、国内の社内業務システムや管理画面の改善にも応用が可能です。一例として、受注管理画面の構成を考えてみます。
この画面では、日々の受注一覧を表示するだけでなく、行を選択した際に詳細情報をモーダルダイアログで開く設計を仮定します。一覧を開くだけの利用手順を想定した場合でも、ダイアログ内でしか使わない集計グラフや長文テキストの表示ライブラリが、共通のユーティリティやダイアログ登録処理を経由して静的にimportされ、一覧の初回表示時にまとめてダウンロードされてしまう構成を想定した例です。
このような構成を見直す場合、まずは使用しているNext.jsのバージョンやバンドラーの前提条件を確認し、変更を伴わない分析から着手するのが基本です。一覧表示に最低限必要な機能と、ダイアログ操作後に読み込めばよい機能を切り分け、共有モジュールの整理や遅延importの境界を検討します。
設定だけで自動的にすべてが解決するとは限らないため、個別のコード構造に合わせた分割設計が必要です。さらに、初回表示のコード削減量を確認するだけでなく、実際にダイアログを開く操作を行って表示崩れや体感の遅延が生じていないか、業務操作の両面から確かめることが重要です。
既存画面の調査と改修範囲のご相談
業務画面の読み込み負荷を改善したい場合でも、どの依存関係を遅延させ、どの処理をサーバー側へ移せるかは、現在のコード構成や運用要件によって異なるのが実情です。安易に分割を行うと、かえって操作時の待ち時間が増えたり、予期せぬ不具合を招いたりすることもあります。
デノフでは、Web・システム開発およびAI活用支援を提供しています。TypeScriptやReact、Next.jsを中心に、業務システムの設計から運用保守までを支援しており、業務要件の整理からAIを活用した分析・調査ツールの選定、実際のコード改修や動作検証の範囲整理まで対応可能です。
「画面の初期表示を軽くしたいが、どこから手を付けるべきか分からない」「AIを使った依存関係の調査や改修手順を自社に合わせて検討したい」といった段階からご相談いただけます。現在の画面構成や改善したい操作について整理したい方は、デノフへの相談窓口よりお気軽にお問い合わせください。
