セッション

Session

20min

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

ブラウザの高速化された昨今でも、Vue.js/Vuexで大量のレコードや要素を扱うにはちょっとした試行錯誤が必要です。
弊社のVue.jsプロジェクトでは、初回ローディング時にほぼ全てのデータをフロントエンドで読み込み処理します。今年に入り十数万件のデータを扱うこととなりました。試しにテストしてみると、緩やかな時の流れの世界がそこにはありました。しかし、チーム総出でチューニングを行った結果、Vue.jsはいきいきと動き出したのです!
本セッションでは、パフォーマンスチューニングで得られたプラクティスをご紹介します。

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

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

Speaker Profile

tbashiyyの写真

株式会社イエソド エンジニア

tbashiyy

Twitterのlogo Githubのlogo

株式会社イエソドのエンジニア。
Vue.js + TypeScript、Server-Side Kotlinを利用してプロダクト作りに励んでいます。
型のある言語が好みです。趣味はビール片手に料理すること。