Viteの本番バンドルファイルを可視化する - Qiita

はじめに みなさん、バンドルファイルのコード分割行っていますでしょうか。各UIフレームワークが提供もしくは推奨しているコンポーネントの遅延読み込みだったり、バンドラーの設定でチャンク戦略を取って分割を行っている方が多いと思います。 コードの分割を行うと分割したファイルの様子を知りたかったり、不自然に肥大化したファイルの原因を辿ったりするなど分割されたファイルの様子を知りたいケースがいくつか出てきます。 この記事ではViteの環境において分割されたバンドルファイルがどのように分布されているかを可視化するライブラリーを紹介します。 Reactを想定したサンプルコードを使用しますが、Viteを用いるVueなどの他のライブラリでも同様に動きます。 rollup-plugin-visualizer Viteはesbuildを利用しているというイメージが強いですがesbuildは開発環境でしか用いられ