ビルドファイルの内訳のレポートを出力する【Vite】

フロントエンドのファイルサイズは、初回ロード時のパフォーマンスの要因になります。
ファイルサイズを削減することはフロントエンドエンジニアが常に考えなければならないことの一つかと思います。

ファイルサイズを削減する際、どのソースコードがどこにバンドルされているかを分析することはファイルサイズを削減するために有用になります。

例えば、極端なサイズのファイルが取り込まれている場合は、何かを見直す必要があるかもしれません。逆にそういった点が見つからなければ、他の方法で初回ロードを短縮する方法を考えるとよいかもしれません。

この記事では、Viteを利用している際のビルドファイルの内訳のレポートを出力方法を書きたいと思います。

rollup-plugin-visualizer

rollup-plugin-visualizerというプラグインを入れると、バンドルファイルのサイズを可視化できます。
https://www.npmjs.com/package/rollup-plugin-visualizer

実際に組み込む

vite・reactのパッケージ内でインストールをします。

npm i -d rollup-plugin-visualizer

vite.config.tsのpluginにvisualizer()を追加します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vite.dev/config/
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { visualizer } from "rollup-plugin-visualizer";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(),visualizer()],
})

上記で設定完了です。
アプリケーションをビルドすることで、可視化データが出力されます。

終わりに

開発の初期段階にツールを導入して、普段からバンドルサイズを気にしておくことが一番良いのかと思います。バンドルサイズの分析ツールを導入して普段からファイルサイズを意識して開発をしていきましょう。