Ionic/Angularのバンドルファイルをwebpack-bundle-analyzerで可視化しよう

本記事は Ionic Framework / Capacitor / Stencil Advent Calendar 2021 Advent Calendar 2021 の2日目の記事です。

---

https://zenn.dev/rdlabo/articles/8ac1bc1be13f16 でモジュール単位の意識が大切であることを述べました。しかし、1モジュールにどれぐらいのPageやComponentを登録させるかといったことに明らかなルールがありません。そこで、webpack-bundle-analyzerを使ってプロジェクトのバンドルファイルを可視化し、1モジュールの規模を決めていきましょう。

webpack-bundle-analyzerを用意しよう

npmでインストールします。プロジェクト単位でインストールしてもいいのですが、さくっと使えると便利なので私はグローバルにインストールしています。

% npm install -g webpack-bundle-analyzer

これで webpack-bundle-analyzer コマンドが使えるようになりました。

stats-jsonをつけてプロジェクトをビルド

webpack-bundle-analyzerは可視化ツールで、これを使うためには解析元となるWebPackのビルドの詳細を出力したjsonファイルが必要となります。これはAngular CLIがオプションを用意していますので、それを利用してプロジェクトをビルドします。

npm run build -- --stats-json

"build": "ng build" をそのままにしてる場合はこのコマンドを入力ください。もし変更している / 削除したという場合は、 npx ng build --stats-jsonでも行う処理は同じとなります。このコマンドを実行すると、ビルドと同時に www/stats.json を生成することができます。

可視化されたバンドルファイルをみてみよう

では、 webpack-bundle-analyzer を使ってバンドルファイルを可視化してみましょう。

webpack-bundle-analyzer www/stats.json

developmentビルドなので、node_modulesの中身が大きくなっています。続いて、プロダクションビルドで webpack-bundle-analyzer を使ってみましょう。

npm run build -- --stats-json --prod && webpack-bundle-analyzer www/stats.json

こちらの方がモジュールサイズの比較という意味ではみやすいですね。 main** となってるのがmain bundleでアプリが起動された時、最初に読み込まれるファイル群です。これをみると、まぁ @angular や @ionic　はしょうがないとしても、思ったよりswiperがファイルサイズ大きいなみたいなことを直感的にみることができます。そして、featureモジュールの中では、 src/app/shared が他のモジュールと比較して大きくなりがちなことがわかります。これでも結構削ったのですが、まだまだ大きいですね。

逆に小さすぎるモジュールもいくつかあり、これは表示時の読み込み遅延が起きるので、先に読み込むモジュールにまとめた方がユーザ体験を高めることにつながります。

まとめ

見慣れないうちは、Ionicコンポーネントのモジュールと自プロジェクトのモジュールの見分けがつかなかったり、どれをどう削っていいかわからなかったりしますが、ぜひアプリのユーザ体験を高めるためにモジュールの可視化と改善にチャレンジしていただければと思います。

それではまた。