Parcelでバンドルされたファイルの内訳を確認する

Webpackにはwebpack-bundle-analyzerというバンドルされたファイルの内訳や解析をみることができるプラグインがあります

webpack-bundle-analyzer
https://www.npmjs.com/package/webpack-bundle-analyzer

Parcelでもプラグインをインストールするだけでこの機能を利用することができます

それがparcel-plugin-bundle-visualiserです

parcel-plugin-bundle-visualiser
https://www.npmjs.com/package/parcel-plugin-bundle-visualiser

使い方

まずはプロジェクトにプラグインをインストールします

$ yarn add -D parcel-plugin-bundle-visualiser

あとはただビルドすれば、プロジェクトルートにreport.htmlという名前で解析結果が生成されます

$ parcel build src/index.html

report.htmlをブラウザで表示すると以下のようにバンドルされたファイルの内訳が表示されます

このレポートでは以下のようなことを確認することができます

• バンドルされたファイルやフォルダ、アセットファイル名
• プロジェクトルートに対する相対パス
• バンドルされたファイルのサイズ
• gzipした場合の推定サイズ
• バンドルに要した時間

バンドルファイルの内訳から無駄なファイルがないかなどを調べることができます

おまけ：ビルド終了時にブラウザでレポートを開く

parcel-plugin-bundle-visualiserはレポートを生成するだけで表示は手動で行わなければなりません

そこで、ビルドの実行後にレポートを開くようなコマンドを書いておくのをお勧めします

Macユーザーの場合は

$ parcel build src/index.html; open report.html

Windowsユーザーの場合は

$ parcel build src/index.html & start report.html

これでビルドが終了したら自動的にレポートが開かれるようになります