かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

React create-react-app で作ったアプリの bundle サイズを確認したい

SPA の速度カイゼンやパッケージやファイルのサイズを可視化してみたい事が多々あります。

今回は create-react-app で作成したアプリでバンドルサイズを可視化してみたのメモ。

create-react-app v3 以降は --stats オプションが廃止され webpack bundle analyzer は使えなくなっていた

バンドルサイズ可視化で調べると出てくる webpack-bundle-analyzer を使う方法を見つけて試していましした。

$ yarn build --state && npx webpack-bundle-analyzer ./build/bundle-stats.json
# …
Compiled successfully.
#...
Couldn't read webpack bundle stats from "/Users/kikiki/app/frontend/build/bundle-stats.json":
Error: ENOENT: no such file or directory, open '/Users/kikiki/app/frontend/build/bundle-stats.json'
error Command failed with exit code 1.

--state オプションを付けてビルドすれば ./build/bundle-stats.json が作成されて webpack-bundle-analyzer で見ることができるというものでしたが、create-react-app v3 以降では --status オプションが廃止されていて bundle-stats.json が作成されなくなっていました。
ejict して webpack の設定自前で弄りたくはない…

Source map explorer を使う

v3 以降では公式に記載されている Source map explorer を使うのが良さそうです。

パッケージをインストール

$yarn add -D source-map-explorer

package.json に npm scripts を追加

"scripts": {
  "start": "PORT=8888 react-scripts start",
  "build": "react-scripts build",
  // ...
  "analyze": "yarn build && source-map-explorer 'build/static/js/*.js'"
}

実行

$ yarn analyze

ビルドが完了したら build/static/js/ 内に出力された js ファイルを元に解析した結果をブラウザで表示してくれます。

f:id:kikiki-kiki:20201019162901p:plain source-map-explorer は見た目がめちゃめちゃシンプルです

それでも webpack-bundle-analyzer が使いたい!

source-map-explorer は見た目がめちゃめちゃシンプルなのでやっぱり webpack-bundle-analyzer を使いたい場合

cra-bundle-analyzer というパッケージを使えば eject して webpack の設定を自分で頑張らなくても webpack-bundle-analyzer が使えるようになるようです。

$ yarn add -D cra-bundle-analyzer
$ npx cra-bundle-analyzer

f:id:kikiki-kiki:20201019162929p:plain

解析が終わると./build/report.html という静的ファイルが作成されて自動的にブラウザで開くようになっており、そこでカラフルな webpack-bundle-analyzer の表示で見ることができるようになりました!
サイズの大きな webpack-bundle-analyzer はlocalnにはインストールせずに npx で実行しているみたいなので、カラフルな表示で見たい場合は cra-bundle-analyzer を使うと良さそうです!

おわり


[参考]