とりあえずページごとに動的に import するようにして分けたのですが 想像以上にファイル数が増えました
例えば こういう依存関係の場合
index.js
A.js
X.js
B.js
Y.js
Z.js
C.js
Z.js
A, B, C をそれぞれ動的なインポートにします
メインである index.js 以外に A, B, C の 3 つのファイルができて 4 つかなと思ったのですがそうじゃなかったです
Z は B からも C からも使われます
B と C の両方に Z を入れると両方を使うページでは二重になってムダですし 別モジュールとして扱われてしまう実害も出ます
なので Z は独立したモジュールとして自動的に分割されます
X は A だけで使われ Y は B だけなので これらはそれぞれ A と B に含まれることになります
実際のところ Z みたいに複数箇所で使われるモジュールってかなり多いです
各ページを開いたときにロードするファイルはメインのファイルとそのページ用のファイルの 2 ファイルになるくらいに考えていたのに 実際はそれよりはるかに多かったです
それでも最適化はされてるようで export せず console.log だけみたいな場合は一つのファイルにまとめられたり B と C の両方が Y と Z を読み込む場合は Y と Z は一つのファイルにまとめられるなどしてました
でも実際の大きめのプロジェクトになると まとまらないことも多そうですし ESM で直接ロードするのとそう変わらないくらいファイルをロードすることになりそうです
それならファイルをまとめる必要あるのかなと思いますね
