Dreamforce2019 day4：Building Scalable Lightning Components With LWC

こんにちは、製品開発部の丸井です。
サンフランシスコで開催中のDreamforce2019に参加しています。

Dreamforce初参加ですが、とにかく規模に圧倒されています！
その中から、私からは3日目に開催された「Building Scalable Lightning Components With LWC 」について報告します。

このセッションでは、大規模な環境において課題となるパフォーマンスについて、 Lightning Web Component (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リリースされて、 開発しやすくなってきているようです。
今後も期待したいと思います。