在現(xiàn)代前端應(yīng)用中，效能是使用者體驗(yàn)的關(guān)鍵因素。提升效能的一個(gè)有效方法是快取服務(wù)（HTTP 請(qǐng)求）函數(shù)的結(jié)果，從而減少冗餘的網(wǎng)路請(qǐng)求和運(yùn)算。

本文將探討 http-front-cache 實(shí)用程序，它提供了一種簡(jiǎn)單且高效的前端快取方法。順便一提，它是開(kāi)源的 ?

什麼是 http-front-cache？

http-front-cache 是一款用於快取瀏覽器中服務(wù)函數(shù)結(jié)果的實(shí)用程式。但是，務(wù)必謹(jǐn)慎使用此實(shí)用程式並遵守某些限制：

1. 要快取的資料不宜過(guò)大。
2. 資料不應(yīng)包含敏感資訊。
3. 資料不應(yīng)過(guò)於頻繁地更改。
4. 服務(wù)參數(shù)不應(yīng)過(guò)於頻繁地更改（如果過(guò)於頻繁更改，則不會(huì)使用快?。?

預(yù)設(shè)情況下，http-front-cache 提供兩個(gè)輔助函數(shù)：

cacheFactory：一個(gè)可擴(kuò)展的快取工廠函數(shù)，它接受一個(gè)提供者（保存快取的位置）來(lái)快取資料。這允許您擴(kuò)展快取機(jī)制，並將快取保存到任何需要的地方，例如 localStorage、sessionStorage、IndexedDB、cookie、記憶體等等。

cacheOnSessionStorage：cacheOnSessionStorage 是一個(gè)可緩存的即用型函數(shù)，它使用 cacheFactory 並將 sessionStorage 定義為提供者。它是 cacheFactory 功能的一個(gè)範(fàn)例。 cacheOnSessionStorage 的建立是因?yàn)?sessionStorage 是前端最常用的快取資料提供者之一。

安裝

要開(kāi)始使用 http-front-cache，您可以透過(guò) npm 安裝它：

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

如何使用 http-front-cache

您可能已經(jīng)注意到，使用 http-front-cache 有兩種方法：

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

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

在此範(fàn)例中，我們定義了一個(gè)服務(wù)函數(shù) fetchData，它從 API 取得資料。然後，我們使用 cacheOnSessionStorage 將此函數(shù)的結(jié)果快取 5 分鐘。當(dāng)呼叫 cachedFetchData 時(shí)，它會(huì)在發(fā)出網(wǎng)路請(qǐng)求之前先檢查快取。

喜歡這篇文章嗎？如果是，別忘了點(diǎn)讚 ?? 並關(guān)注我以保持更新。我會(huì)繼續(xù)創(chuàng)作更多類似的內(nèi)容

2) 使用自訂提供者擴(kuò)充 http-front-cache

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

在此範(fàn)例中，我們使用 getItem、setItem 和 removeItem 方法定義了一個(gè)自訂提供者。然後，我們使用 cacheFactory 建立一個(gè)使用自訂提供者的快取函數(shù)。同樣可以快取您需要的資料。 xP

請(qǐng)我喝杯咖啡 ?。希望我的幫助對(duì)您有幫助。 ?

結(jié)論

http-front-cache 是一款功能強(qiáng)大的實(shí)用程序，可透過(guò)快取服務(wù)函數(shù)的結(jié)果來(lái)幫助您提升 Web 應(yīng)用程式的效能。

有關(guān)更多資訊和最新更新，請(qǐng)查看 GitHub 上的完整文件。

查看我的其他文章

以上是使用 http-front-cache 提升前端應(yīng)用程式效能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！