こんにちは、製品開発部の丸井です。
サンフランシスコで開催中のDreamforce2019に参加しています。
Dreamforce初参加ですが、とにかく規模に圧倒されています！
その中から、私からは3日目に開催された「Building Scalable Lightning Components With LWC
」について報告します。
このセッションについて
このセッションでは、大規模な環境において課題となるパフォーマンスについて、
Lightning Web Component (LWC)を利用した最適化方法を紹介していました。
最適化することでパフォーマンスとユーザエクスペリエンスの改善が見込めます。
大規模環境の課題
大規模環境では処理のリクエストが多く、以下のような課題があります。
- ページの読み込み時間が長い
- 他のアプリケーションの容量を圧迫
- レポートやダッシュボードのタイムアウト
- リミットに達してしまう
- リソースの競合
LWCを利用した最適化の方法
1. コンポーネントの改善
LWCのif:trueを利用し、DOMを減らすことができます。
DOMを減らすことでパフォーマンスとユーザエクスペリエンスの向上が期待できます。
2. フォームの改善
LWC Form Modulesを利用します。
ここでは400項目と多く、スクロールが大変な場合を例にして、画面を分割してフローにしています。
3. リストビューの改善
リストビューを表示する場合は、より処理速度の速いgetListUIを利用することで パフォーマンスの向上が期待できます。
4. キャッシュ
uiApiを利用すると、データは自動的にキャッシュされます。
ページ内の他のコンポーネントで使用可能なデータはキャッシュすることで、パフォーマンス向上が期待できます。
5. データアクセスの最適化
UI APIは、一度でデータとメタデータを取得が可能です。
利用することでパフォーマンスの向上が期待できます。
6. サーバサイドの最適化
サーバサイドでは以下のような最適化方法があり、パフォーマンスの向上が期待できます。
- 処理を減らすことで待ち時間を短縮
- 呼び出しを減らす
- @Auraenabledメソッドの処理を減らす
- クライアント側で実行できる処理はクライアントで行う
おわりに
以上、LWCを利用したパフォーマンス改善の紹介でした。
他にもAuraからLWCへの移行のセッションが多くありました。
また、LWCはlocal Developmentがbetaリリースされて、
開発しやすくなってきているようです。
今後も期待したいと思います。