Open1
高速化のための画像読み込み
LemonmanNo39
上記の記事でもあるように、MUIのIconなどが激重いものあり、割とどのように画像を読み込んでいくか大切になる。「Base64画像読み込み」や「ローカルのアセットとして画像保存したものを読み込み」、「SVGコンポーネントとして読み込み」とかがありそう。
SVGはまあ言わずもがな。（https://blog.logrocket.com/how-to-use-svgs-react/ ）
「ローカルのアセットとして画像保存したものを読み込み」も良い形だが、初回読み込み遅い問題がある（https://react.dev/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#asset-loading ）
「Base64画像読み込み」は、以下のようなアイコンをどこかtsファイルに定義して、それを読み込むと早くなりそう。
const dragHandle = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCI+PGc+PHJlY3QgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0Ii8+PC9nPjxnPjxnPjxnPjxwYXRoIGQ9Ik0yMCw5SDR2MmgxNlY5eiBNNCwxNWgxNnYtMkg0VjE1eiIvPjwvZz48L2c+PC9nPjwvc3ZnPg=="
しかもメリットが「ネットワークリクエストの削減」や「イメージを外部ファイルとしてホストする必要がなくなる」とかある。（Base64でエンコードすると、クロスオリジンの問題を避けられるとか？）
ただ、Base64も欠点はありそうで、「データサイズの増加するからインターネット接続を使用しているユーザーにとっては問題になる可能性ありそう」とか「キャッシュの問題があるから画像が更新された場合、全体のCSSやJavaScriptファイルを再ダウンロードする必要がある」とか。