はじめに

こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
今回は、ReactのビルドツールであるViteを使ってアプリケーションをビルドした際に、「Some chunks are larger than 500 kB after minification.」という警告が表示された場合の対処法について説明します。
この警告は、ビルドされたチャンクのサイズが大きすぎることを示しており、パフォーマンスの問題を引き起こす可能性があります。
一番いいのは、rollup-plugin-visualizerを使って、ビルドされたチャンクのサイズを可視化することです。

rollup-plugin-visualizerの導入手順

まず、rollup-plugin-visualizerをプロジェクトにインストールします。以下のコマンドを実行してください。

npm install --save-dev rollup-plugin-visualizer

vite.config.tsファイルを開き、以下のようにrollup-plugin-visualizerをインポートし、プラグインとして追加します。

import { defineConfig, type PluginOption } from "vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [visualizer() as PluginOption],
});

これで、npm run buildを実行すると、ビルドプロセスの一環としてチャンクのサイズが可視化されます。ビルドが完了すると、プロジェクトのルートディレクトリにstats.htmlというファイルが生成されます。このファイルをブラウザで開くと、チャンクのサイズや依存関係が視覚的に表示されます。

これで、どのチャンクが大きすぎるかを特定し、必要に応じてコードの分割や最適化を行うことができます。

まとめ

今回は、Viteを使用してReactアプリケーションをビルドする際に表示される「Some chunks are larger than 500 kB after minification.」という警告に対処する方法として、rollup-plugin-visualizerの導入手順を説明しました。
今回の記事では、実際にパフォーマンスの改善までは行いませんでしたが、このプラグインを使用することで、ビルドされたチャンクのサイズを可視化し、パフォーマンスの問題を特定しやすくなります。ぜひ試してみてください。

参考資料