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