chromeのdevtoolを見ながらやったこと
Networkタブ
不要なリクエストがないか(重複リクエストとか)
キャッシュはできないか
Performanceタブ
メモリ使用量減らせるか
どのタイミングで処理が重いか
Performance Insightsタブ
Render blocking requestsを探して対処
FCP, LCPを早くできないか
Vue devtool
MutationやActionsで長い奴がないか
同じ処理が連続してないか
同じ処理が連続する場合、一度にまとめて処理する
一度にまとめて処理が多すぎてユーザの操作が固まる場合はn個ずつ、n秒待ちながら処理するなど
重いコンポーネントでrenderが何回も呼ばれてないか
Vue部分
mounted等でデータ取得している場合、一度にいろんなcomponentから取得すると渋滞するのでタイミングを変える
たとえば見えたタイミングでデータを取得するとか(Infiniteやv-lazyのような感じ)
globalなmixinで変なコードがないか
クリックした時に反応までラグがないか
JS部分
arrayの検索や置換で遅い時がある
MapやSetを使う
おまけ
一度にまとめて処理するとこでふと「firestoreのデータも複数一気に取得したら早くなるんじゃないか?」と思ったけど別にそんなことないみたい(事実未確認)
https://stackoverflow.com/questions/46721517/google-firestore-how-to-get-several-documents-by-multiple-ids-in-one-round-tri
以下のような記事も参考にしました
https://qiita.com/miyaoka/items/5183c143e195455ae65e
https://qiita.com/shun91/items/be4ae465c32b131a27f2
https://scrapbox.io/ninjinkun/Vue%E3%81%AE%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E7%90%86%E8%A7%A3%E3%81%97%E3%81%A6%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E4%BD%8E%E4%B8%8B%E3%82%92%E9%98%B2%E3%81%94%E3%81%86_(Roppongi.vue_%234_)
https://ja.vuejs.org/guide/best-practices/performance.html
おわり
他にもやったら追記したい
公式のベストプラクティス分かりやすくて泣いた
https://ja.vuejs.org/guide/best-practices/performance.html