弊社のフロントエンドのパフォーマンス改善のお話

はじめに はじめまして、BEENOSの山岡です。 普段は主にフロントエンドの開発を担当しており、執筆時点では新卒3年目となりました(時が経つのは早いですね…) 今回は、弊社が運用している大規模Webサービスのフロントエンドのパフォーマンス改善について、振り返りも兼ねて共有したいと思います✏️ 問題 今回の取り組みの前に抱えていたプロダクトの問題点としては、以下の2点です。 ①レンダリング後にAPIをたたいた後、再度データを取得する際に、再び同じAPIをたたいてしまっている。 ②APIのレスポンスの値に対して、都度storeの枠を増やす必要があり、それを行わずに別の場所で再ロードをすると、前回のデータが連鎖的に変わってしまう現象が発生する。(cloneDeepなどを使ってオブジェクトをディープコピーすることで対処できますが、cloneDeepによって作成された新しいオブジェクトはリアクティブ