十数万レコードに耐えうるVue.jsプロジェクトを実現するためのパフォーマンスチューニング by tbashiyy

ブラウザの高速化された昨今でも、Vue.js/Vuexで大量のレコードや要素を扱うにはちょっとした試行錯誤が必要です。

弊社のVue.jsプロジェクトでは、初回ローディング時にほぼ全てのデータをフロントエンドで読み込み処理します。今年に入り十数万件のデータを扱うこととなりました。試しにテストしてみると、緩やかな時の流れの世界がそこにはありました。しかし、チーム総出でチューニングを行った結果、Vue.jsはいきいきと動き出したのです！

本セッションでは、パフォーマンスチューニングで得られたプラクティスをご紹介します。

• Chrome DevToolsの活用
• リアクティブのコントロール
• Intersection Observerを使った表示の制限
• 繰り返し使用するコンポーネントの関数型コンポーネント化
  etc…

※Vue2.Xでの事例となります。