Viteで作成したReactアプリのファイルのサイズを可視化する

はじめに

パフォーマンスチューニング等を行う際に肥大化したファイルの特定と改善のため、
バンドル後のファイルのサイズを確認したい時があります。
本記事では rollup-plugin-visualizer を使用し、Viteで作成したReactアプリのバンドル後のファイルサイズを確認します。

・rollup-plugin-visualizer

環境

• vite：5.2
• React：18.2
• rollup-plugin-visualizer：5.12

インストール

インストールの方法はドキュメントに記載されています。
npmとyarnしか記載されていませんでしたがpnpmでもインストールできました。

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

・ドキュメント：https://github.com/btd/rollup-plugin-visualizer#installation

ViteConfigの設定

rollup-plugin-visualizerをインストール後にconfigファイルに設定を追記します。
今回はビルド時に、バンドル後ファイルのステータスが記載されているbundledFileStatus.htmlを出力します。

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// インポート文を追加
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    react(),
    // 設定を追加
    visualizer({ 
      // ビルド後に出力されるファイル名
      filename: 'bundledFileStatus.html',
      // ビルド後に出力されるファイルを自動で開くかどうか
      open: true ,
      // テンプレートの種類
      template:'treemap',
    }),
  ],
})

今回はテンプレートの種類を'treemap'としていますが、そのほかにも'sunburst', 'network', 'raw-data'等があります。

詳細はドキュメントに記載されています。

フォルダ構造

本記事にて使用したサンプルのフォルダ構造は以下の通りです。
Reactで簡単なページを1つ作成しています。

◆フォルダツリー

root
│
└src
　│  App.tsx
　│  main.tsx
　│
　└─components
　    ├─AricleContainer
　    │      └AricleContainer.tsx
　    │        ～～
　    │
　    ├─footer
　    │      └Footer.tsx
　    │        ～～
　    │
　    ├─header
　    │      └header.tsx
　    │        ～～
　    │
　    └─MainContainer
　            └MainContainer.tsx
　             ～～

参考までに、上記のフォルダ構造で作成したページをブラウザで確認しておきます。
ブラウザで確認したものは以下の通りです。
今回はassets等も使っておらず、ファイルサイズもかなり小さくなると思われます。

◆ npm run dev で立ち上げた際のブラウザ画面

ビルド実行

ビルドを実行すると、bundledFileStatus.htmlが出力されます。
ブラウザからsrc配下のフォルダを確認します。
一番上がrootで一番下が各tsxファイルとなっており、本記事のプロジェクトのフォルダツリー構造が見てとれます。

src配下ではApp.tsxが最も大きな四角形であり、ファイルサイズが一番大きくなっています。
カーソルを各ファイルの上に乗せると、それぞれファイルサイズが確認できました。

終わりに

今回は簡単なサンプルでrollup-plugin-visualizerを使用し、バンドル後のファイルサイズを確認しました。
複数のライブラリや重たくなりそうな要素を取り入れたファイルを作成して、
再度ファイルサイズを見てみると、また見え方が変わってくると思うので時間があれば確認したいと思います。