Steigern Sie die Leistung Ihrer FrontEnd-App mit http-front-cache

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:

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

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

<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>

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

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

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!