LoginSignup
0
0

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

Posted at

どうやるの?

動的データソースの提供機能を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で定義したDummyDataClassBaseClientSideWebPartを継承した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パーツの遅延読み込みが無効になり、サイトを読み込んだ時点で同時に読み込まれるようになります
動的データソースを利用(悪用?)したちょっとしたハックでした👏

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0