🌤️
Material UIでIconが激重だったけどImportの書き方変えたらパフォーマンス改善された話
Material UiのIconとても便利なんですが、利用当初は重たくて悩みのタネでした。
しかしImportでの書き方を変えたら改善されたよという小ネタです。
ちなみに公式サイトには書いてある話なので新しいことは何もありません
結論
index1.js
import {AccountBox,AddToHomeScreen,AttachFile,...} from '@material-ui/icons';
という書き方を
index2.js
import AccountBoxIcon from '@material-ui/icons';
import AddToHomeScreenIcon from '@material-ui/icons/AddToHomeScreen';
import AttachFileIcon from '@material-ui/icons/AttachFile';
.
.
という書き方にすればパフォーマンス上がります。
検証結果
chromeのperfomanceを使ってサイト表示までの時間を検証してみました。
ちなみにこんな感じのページです。
Next.jsの初期画面に適当なアイコン10個表示するというので実験しました。
index1.jsの書き方の場合
index2.jsの書き方の場合
上記のテスト検証はアイコン10個程度ではありますが、それだけでも倍くらい差が出てきました。もっと他の要素やコンポーネントが増えてくると影響は大きくなるのではないのかなと思います。
私の場合は開発時にリロードが4〜5秒ほどかかるようになってしまい、修正してからは1〜2秒程度に改善されました。develop環境での検証なのでproduction環境だともっとパフォーマンスは良いと思いますが、リロードのたびに4〜5秒もかかってると開発も捗らないですよね。
こちらからは以上です！同じ悩みで困ってる方は是非試してみて下さい！
参考
Discussion