やりたいこと

Create React Appを使って作成したアプリのバンドルサイズを確認したい。
各ライブラリの内訳などもわかるようにしたい。

やったこと

1. source-map-explorerをインストール

npm install source-map-explorer

2. analyzeコマンドを追記

"analyze": "source-map-explorer 'build/static/js/*.js'",

3. アプリをビルドして、anayzeを実行

npm run build
npm run analyze

4. ブラウザで確認
   

注意

CRAの設定でビルド時にソースマップを生成しないようにしていた場合、npm run analyze時にソースマップが参照できずエラーが出る。
※デフォルトではソースマップ生成されるようになってるのでいじってなければ気にする必要なし。

参考

https://create-react-app.dev/docs/analyzing-the-bundle-size/