lazy loadingする

初期表示時に不要なものは最初から読み込まずに、

button押した時など必要になったタイミングで初めてその部分のchunkがfetchされる

使う

別スレッドでDynamic importsする ref

Webpack

ECMAScriptにもある

デメリット

例えば、全部Dynamic importsにするとどの様な問題が起きるか？

開発コスト

若干気にすることが増えるので、無駄にdynamic importにする必要はない

対象物をloadingする時に待ちが発生する

でもこれは初回に待つか後で待つかの話

chunkが増えるのでrequest数が増える

数自体は増えるけど、問題とは言えなくない？

問題は時間なので

LCPを悪化させる #??

これはたぶんそんなことないと思う

他 #??

lazy loadingできることを確認する

対象のcomponentにconsole.logを仕込むとか

Networkパネルを見る

https://web.dev/code-splitting-with-dynamic-imports-in-nextjs/ で書いてる

どのComponentをdynamic importするべきなのか

非同期的に読み込むComponent

つまり、初期表示に必要のないComponent

例えば、大きめのリストの子など

クリックした時に開くmodalとか

選択されていないタブの内容とか

SSRを回避する時

処理にbrwoserのAPIを使用する場合はerrorになるため、serverでは実行されないようにする

わかるけど、本質的な問題ではないだろう

etc.

viewport外のComponentを全部Dynamic importするようにすればいいんじゃないの？

go to definition上手く動かなくなるのをどうにかできないものか