概要
Create React App(以降、CRA)でバンドルサイズを可視化して分析することができます。(CRA V3以降でチャンク分析にも対応)
公式ドキュメントに手順はあるのですが、Windows環境だと修正が必要になるので、その説明です。
バンドルサイズ云々は実は関係なくて、Windows環境でnpm-scriptsを動かす際に気を付けたいことへの言及です。
本題
CRAのバンドルサイズ分析に関する公式ドキュメントはこちら。
https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
MacOSだと問題ないのかもしれませんが、Windowsではファイルが見つからない旨のエラーになります。
scriptsの記述を変更しなくてはなりません。
"analyze": "source-map-explorer 'build/static/js/*.js'",
まず、正しく実行できた時のターミナル出力はこちら
source-map-explorer "./build/static/js/*.js"
公式通りだとこちら
source-map-explorer 'build/static/js/*.js'
相違点は2点
- シングルクォーテーションかダブルクォーテーションの違い
- 相対パス指定の有無
1についてはWindowsあるあるのようで、以下の先駆者の方たち同様にダブルクォーテーションにすべきと理解。
https://qiita.com/Kazunori-Kimura/items/8dd2f67200d2750cd0ac
https://untitled-txt.hatenablog.com/entry/2018/12/04/112500
後で調べてみると、シングルクォーテーションの場合はワイルドカードだろうと文字列として扱うようですね。
http://tokkan.net/ps/string.html
2の根本的な部分は理解していませんが、明示的に相対パスを指定しろよと理解
1はMacOSでも問題ないとのことなので、2も同様に問題ないのではないかと思っています。
なので、修正後ならクロスプラットフォーム対応になる…とおもう（免責）。
私が修正したscriptsはこちら。
"analyze": "source-map-explorer \"./build/static/js/*.js\"",
おまけ
公式ドキュメントではパッケージインストールのコマンドとして
npm install --save source-map-explorer
としていますが、通常実行には必要ないのでdevDependenciesの方が適していると思っています。
npm install --save-dev source-map-explorer
理由としては、dependenciesは実行時に必要なもののみで構成した方が、実行時にどのパッケージを使っているのか明確化できるからです。
ただ、source-map-explorerのインストールガイドを見ても--save-devのオプションは指定していません。
どちらを選択してもバンドルサイズに影響はないので、npmのドキュメントをどう解釈するか好みレベルの問題ではありますが。
https://docs.npmjs.com/files/package.json#dependencies
https://docs.npmjs.com/files/package.json#devdependencies
まとめ
OSの違いが絡んでくると途端に面倒になる話でした。
ブラウザやフレームワークに支えられているとつい忘れがちですが、あらためて感謝した次第です。
scripts等のOSが絡む場合、クロスプラットフォーム対応のため各環境下でのテストを忘れないようにしましょう。
- スクリプトにはシングルクォーテーションではなくダブルクォーテーションを使おう
- 相対パスなら明示的に./を入れよう
本記事はおそらくいずれ公式ドキュメントが修正されるのではないかと思っています。
Windows環境でも公式ドキュメントの操作で動作するなら、本記事の役割は終了しています。