SharePointOnlineでWebパーツの遅延読み込みを回避する

どうやるの？

動的データソースの提供機能をwebパーツに付与することで遅延読み込みが回避できます

動的データソースとは？

webパーツ間でデータ連携するための仕組みです
サイトに配置したwebパーツ間でデータを共有できます
（らしい、、本来の目的で使ったことがないので、、）

なぜ動的データソースの設定を行うとwebパーツの遅延読み込みが回避できるのか

動的データソースとなるwebパーツはほかのパーツからデータを参照されるため、遅延読み込み対象となるとそのデータを提供できなくなってしまうため

以前は上記に対応しておらず、遅延読み込みが行われていましたが、以下のIssueで修正されたようです
https://github.com/SharePoint/sp-dev-docs/issues/6091

実装方法

以下の手順で行います

1. ダミーの動的データソースクラスを作成する
2. webパーツでダミーデータクラスを初期化して提供する

1.ダミーの動的データソースクラスを作成する

動的データソースクラスを作成する際、IDynamicDataCallablesを実装したクラスが必要になります
以下のように実装してみます

import {
  IDynamicDataPropertyDefinition,
  IDynamicDataCallables,
} from "@microsoft/sp-dynamic-data";

/** 動的データソースのダミークラス */
export default class DummyDataClass implements IDynamicDataCallables {
  /** 動的データの型定義 */
  public getPropertyDefinitions(): ReadonlyArray<IDynamicDataPropertyDefinition> {
    return [
      {
        id: "dummy",
        title: "dummy",
      },
    ];
  }

  /** 動的データの値を取得 */
  public getPropertyValue(propId: string): string {
    /** ダミーデータは使用しないため、エラーを投げるようにしておく */
    throw new Error("Method not implemented.");
  }

  /** 動的データの値をセット */
  public setPropertyValue(value: string): void {
    /** ダミーデータは使用しないため、エラーを投げるようにしておく */
    throw new Error("Method not implemented.");
  }
}

2.webパーツでダミーデータクラスを初期化して提供する

1で定義したDummyDataClassをBaseClientSideWebPartを継承したWebPartクラス内で、context.dynamicSourceManagerに渡してあげます

export default class DummyWebPart extends BaseClientSideWebPart<IProps> {
+    /** ダミーデータ変数 */
+    dummyDataClass: DummyDataClass;

    protected async onInit(): Promise<void> {
+      /** ダミーデータ初期化 **/
+      this.dummyDataClass = new DummyDataClass();

+      /** `dynamicDataSourceManager.initializeSource`に指定する **/
+      this.context.dynamicDataSourceManager.initializeSource(
+        this.dummyDataClass
+      );
    }

あとがき

上記の実装を行うとWebパーツの遅延読み込みが無効になり、サイトを読み込んだ時点で同時に読み込まれるようになります
動的データソースを利用（悪用？）したちょっとしたハックでした👏