In modernen Frontend-Anwendungen ist die Leistung ein Schlüsselfaktor für die Benutzererfahrung. Eine wirksame M?glichkeit zur Verbesserung der Leistung besteht darin, die Ergebnisse von Dienstfunktionen (HTTP-Anforderungen) zwischenzuspeichern und so redundante Netzwerkanforderungen und -berechnungen zu reduzieren.

In diesem Artikel wird das Dienstprogramm http-front-cache untersucht, das eine einfache und effiziente Methode zum Front-End-Caching bietet. übrigens ist es Open Source ?

Was ist http-front-cache?

http-front-cache ist ein Dienstprogramm zum Zwischenspeichern der Ergebnisse von Dienstfunktionen im Browser. Es ist jedoch wichtig, dieses Dienstprogramm mit Vorsicht zu verwenden und bestimmte Einschr?nkungen einzuhalten:

1. Die zwischenzuspeichernden Daten sollten nicht zu gro? sein.
2. Daten sollten keine sensiblen Informationen enthalten.
3. Daten sollten sich nicht zu h?ufig ?ndern.
4. Dienstparameter sollten sich nicht zu h?ufig ?ndern (wenn sie sich zu h?ufig ?ndern, wird der Cache nicht verwendet).

Standardm??ig stellt http-front-cache zwei Hilfsfunktionen bereit:

cacheFactory: Eine erweiterbare Cache-Factory-Funktion, die einen Anbieter (den Ort, an dem der Cache gespeichert ist) zum Zwischenspeichern von Daten akzeptiert. Dadurch k?nnen Sie den Caching-Mechanismus erweitern und den Cache dort speichern, wo er ben?tigt wird, z. B. localStorage, sessionStorage, IndexedDB, cookie, Speicher usw.

cacheOnSessionStorage: cacheOnSessionStorage ist eine zwischenspeicherbare, gebrauchsfertige Funktion, die cacheFactory akzeptiert und sessionStorage als Anbieter definiert. Es ist ein Beispiel für die Funktion cacheFactory. cacheOnSessionStorage wurde erstellt, weil sessionStorage einer der am h?ufigsten verwendeten Anbieter für zwischengespeicherte Daten im Frontend ist.

Installation

Um mit http-front-cache zu beginnen, k?nnen Sie es über npm installieren:

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

So verwenden Sie http-front-cache

Sie haben vielleicht bemerkt, dass es zwei M?glichkeiten gibt, http-front-cache zu verwenden:

1) Verwenden Sie 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ù)
});

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

In diesem Beispiel definieren wir eine Servicefunktion fetchData, die Daten von der API abruft. Anschlie?end verwenden wir cacheOnSessionStorage, um die Ergebnisse dieser Funktion 5 Minuten lang zwischenzuspeichern. Wenn cachedFetchData aufgerufen wird, überprüft es den Cache, bevor eine Netzwerkanfrage gestellt wird.

Gef?llt Ihnen dieser Artikel? Wenn ja, vergessen Sie nicht, ?? zu liken und mir zu folgen, um auf dem Laufenden zu bleiben. Ich werde weiterhin weitere ?hnliche Inhalte erstellen

2) Verwenden Sie benutzerdefinierte Anbietererweiterungen http-front-cache

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

In diesem Beispiel definieren wir einen benutzerdefinierten Anbieter mit den Methoden getItem, setItem und removeItem. Anschlie?end verwenden wir cacheFactory, um eine Cache-Funktion zu erstellen, die einen benutzerdefinierten Anbieter verwendet. Die von Ihnen ben?tigten Daten k?nnen auch zwischengespeichert werden. xP

Kauf mir eine Tasse Kaffee ?. Ich hoffe, meine Hilfe ist hilfreich für Sie. ?

Fazit

http-front-cache ist ein leistungsstarkes Dienstprogramm, das Ihnen helfen kann, die Leistung Ihrer Webanwendungen zu verbessern, indem es die Ergebnisse von Dienstfunktionen zwischenspeichert.

Weitere Informationen und die neuesten Updates finden Sie in der vollst?ndigen Dokumentation auf GitHub.

Schauen Sie sich meine anderen Artikel an

Das obige ist der detaillierte Inhalt vonSteigern Sie die Leistung Ihrer FrontEnd-App mit http-front-cache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!