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

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

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

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

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

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

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

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

インストール

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

npm i @openish-u/http-front-cache

使用方法http-front-cache

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

1) cacheOnSessionStorage

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 返回的數(shù)據(jù)
});

// 導出 cachedFetchData 并根據(jù)需要使用

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

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

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

npm i @openish-u/http-front-cache

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

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

結論

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

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

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

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