1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Vueアプリのパフォーマンス改善でやったこと

Posted at

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

おわり

他にもやったら追記したい

公式のベストプラクティス分かりやすくて泣いた :godmode:
https://ja.vuejs.org/guide/best-practices/performance.html

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?