http-front-cache でフロントエンド アプリのパフォーマンスを向上させる

最新のフロントエンド アプリケーションでは、パフォーマンスがユーザー エクスペリエンスの重要な要素です。パフォーマンスを向上させる効果的な方法は、サービス (HTTP リクエスト) 関数の結果をキャッシュして、冗長なネットワーク リクエストと計算を減らすことです。

この記事では、フロントエンド キャッシュのシンプルかつ効率的な方法を提供する http-front-cache ユーティリティについて説明します。ちなみにオープンソースです?

http-front-cacheとは何ですか?

http-front-cache は、サービス関数の結果をブラウザーにキャッシュするためのユーティリティです。ただし、このユーティリティを慎重に使用し、次の制限事項に従うことが重要です。

1. キャッシュされるデータは大きすぎてはなりません。
2. データには機密情報が含まれていてはなりません。
3. データはあまり頻繁に変更しないでください。
4. サービスパラメータは頻繁に変更しないでください (変更が頻繁すぎると、キャッシュが使用されなくなります)。

デフォルトでは、http-front-cache は 2 つのヘルパー関数を提供します:

cacheFactory: データをキャッシュするプロバイダー (キャッシュが保存される場所) を受け入れる拡張可能なキャッシュ ファクトリ関数。これにより、キャッシュ メカニズムを拡張し、localStorage、sessionStorage、IndexedDB、cookie、メモリなどの必要な場所にキャッシュを保存できます。

cacheOnSessionStorage: cacheOnSessionStorage は、cacheFactory を受け取り、プロバイダーとして sessionStorage を定義する、キャッシュ可能なすぐに使用できる関数です。 cacheFactory 機能の例です。 cacheOnSessionStorage が作成されたのは、sessionStorage がフロントエンドで最もよく使用されるキャッシュ データ プロバイダーの 1 つであるためです。

インストール

http-front-cache を使い始めるには、npm 経由でインストールできます:

<code class="language-bash">npm i @openish-u/http-front-cache</code>

使用方法http-front-cache

http-front-cache には 2 つの使用方法があることに気づいたかもしれません:

1) cacheOnSessionStorage

を使用します

<code class="language-javascript">import { cacheOnSessionStorage } from 'utility-http-front-cache';

type Params = string;
type Result = { data: string[] };

const fetchData: ServiceFunction = async (param: string) => {
  const response = await fetch(`https://dev.to/api/articles?${param}`);
  return response.json();
};

const cachedFetchData = cacheOnSessionStorage(fetchData, 5 * 60 * 1000); // 缓存 5 分钟

// 使用
cachedFetchData('exampleParam').then((result) => {
  console.log(result); // result 是 fetchData 返回的数据
});

// 导出 cachedFetchData 并根据需要使用</code>

この例では、API からデータを取得するサービス関数 fetchData を定義します。次に、cacheOnSessionStorage を使用して、この関数の結果を 5 分間キャッシュします。 cachedFetchData が呼び出されると、ネットワーク要求を行う前にキャッシュをチェックします。

---

この記事が好きですか? 「はい」の場合は、いいね ❤️ を忘れずにフォローし、最新情報を入手してください。今後も同様のコンテンツを作成していきます

---

2) カスタムプロバイダー拡張機能を使用する http-front-cache

<code class="language-bash">npm i @openish-u/http-front-cache</code>

この例では、getItem、setItem、および removeItem メソッドを使用してカスタム プロバイダーを定義します。次に、cacheFactory を使用して、カスタム プロバイダーを使用するキャッシュ関数を作成します。必要なデータをキャッシュすることもできます。 xP

コーヒーを一杯買ってきてください ☕。私の助けがあなたのお役に立てば幸いです。 ?

結論

http-front-cache は、サービス関数の結果をキャッシュすることで Web アプリケーションのパフォーマンスを向上させる強力なユーティリティです。

詳細と最新の更新については、GitHub の完全なドキュメントを確認してください。

他の記事もチェックしてください

以上がhttp-front-cache でフロントエンド アプリのパフォーマンスを向上させるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。