Boostez les performances de votre application FrontEnd avec http-front-cache

Dans les applications front-end modernes, les performances sont un facteur clé de l'expérience utilisateur. Un moyen efficace d'améliorer les performances consiste à mettre en cache les résultats des fonctions de service (requête HTTP), réduisant ainsi les requêtes et calculs réseau redondants.

Cet article explorera l'utilitaire http-front-cache, qui fournit une méthode simple et efficace de mise en cache frontale. Au fait, c'est open source ?

Qu'est-ce que http-front-cache ?

http-front-cache est un utilitaire permettant de mettre en cache les résultats des fonctions de service dans le navigateur. Cependant, il est important d'utiliser cet utilitaire avec prudence et de respecter certaines restrictions :

1. Les données à mettre en cache ne doivent pas être trop volumineuses.
2. Les données ne doivent pas contenir d'informations sensibles.
3. Les données ne doivent pas changer trop fréquemment.
4. Les paramètres du service ne doivent pas changer trop fréquemment (s'ils changent trop fréquemment, le cache ne sera pas utilisé).

Par défaut, http-front-cache fournit deux fonctions d'assistance :

cacheFactory : Une fonction de fabrique de cache extensible qui accepte un fournisseur (l'emplacement où le cache est enregistré) pour mettre en cache les données. Cela vous permet d'étendre le mécanisme de mise en cache et de sauvegarder le cache partout où cela est nécessaire, comme localStorage, sessionStorage, IndexedDB, cookie, mémoire, etc.

cacheOnSessionStorage : cacheOnSessionStorage est une fonction pouvant être mise en cache et prête à l'emploi qui prend cacheFactory et définit sessionStorage en tant que fournisseur. C'est un exemple de la fonctionnalité cacheFactory. cacheOnSessionStorage a été créé parce que sessionStorage est l'un des fournisseurs de données en cache les plus couramment utilisés sur le front-end.

Installation

Pour commencer avec http-front-cache vous pouvez l'installer via npm :

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

Comment utiliser http-front-cache

Vous avez peut-être remarqué qu'il existe deux façons d'utiliser http-front-cache :

1) Utiliser 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>

Dans cet exemple, nous définissons une fonction de service fetchData qui récupère les données de l'API. Nous utilisons ensuite cacheOnSessionStorage pour mettre en cache les résultats de cette fonction pendant 5 minutes. Lorsque cachedFetchData est appelé, il vérifie le cache avant de faire une requête réseau.

---

Vous aimez cet article ? Si oui, n'oubliez pas d'aimer ❤️ et de me suivre pour rester informé. Je continuerai à créer davantage de contenu similaire

---

2) Utilisez des extensions de fournisseur personnalisées http-front-cache

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

Dans cet exemple, nous définissons un fournisseur personnalisé en utilisant les méthodes getItem, setItem et removeItem. Nous utilisons ensuite cacheFactory pour créer une fonction de cache qui utilise un fournisseur personnalisé. Les données dont vous avez besoin peuvent également être mises en cache. xP

Achetez-moi une tasse de café ☕. J'espère que mon aide vous sera utile. ?

Conclusion

http-front-cache est un utilitaire puissant qui peut vous aider à améliorer les performances de vos applications Web en mettant en cache les résultats des fonctions de service.

Pour plus d'informations et les dernières mises à jour, consultez la documentation complète sur GitHub.

Découvrez mes autres articles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!