2019.11.23

Dreamforce2019 day4:Building Scalable Lightning Components With LWC

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

こんにちは、製品開発部の丸井です。
サンフランシスコで開催中の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リリースされて、 開発しやすくなってきているようです。
今後も期待したいと思います。

20 件
     
  • banner
  • banner

関連する記事