使用 http-front-cache 提升前端應用程式效能

在現代前端應用中，效能是使用者體驗的關鍵因素。提升效能的一個有效方法是快取服務（HTTP 請求）函數的結果，從而減少冗餘的網路請求和運算。

本文將探討 http-front-cache 實用程序，它提供了一種簡單且高效的前端快取方法。順便一提，它是開源的 ?

什麼是 http-front-cache？

http-front-cache 是一款用於快取瀏覽器中服務函數結果的實用程式。但是，務必謹慎使用此實用程式並遵守某些限制：

1. 要快取的資料不宜過大。
2. 資料不應包含敏感資訊。
3. 資料不應過於頻繁地更改。
4. 服務參數不應過於頻繁地更改（如果過於頻繁更改，則不會使用快取）。

預設情況下，http-front-cache 提供兩個輔助函數：

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

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

安裝

要開始使用 http-front-cache，您可以透過 npm 安裝它：

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

如何使用 http-front-cache

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

1) 使用 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>

在此範例中，我們定義了一個服務函數 fetchData，它從 API 取得資料。然後，我們使用 cacheOnSessionStorage 將此函數的結果快取 5 分鐘。當呼叫 cachedFetchData 時，它會在發出網路請求之前先檢查快取。

---

喜歡這篇文章嗎？如果是，別忘了點讚 ❤️ 並關注我以保持更新。我會繼續創作更多類似的內容

---

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

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

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

請我喝杯咖啡 ☕。希望我的幫助對您有幫助。 ?

結論

http-front-cache 是一款功能強大的實用程序，可透過快取服務函數的結果來幫助您提升 Web 應用程式的效能。

有關更多資訊和最新更新，請查看 GitHub 上的完整文件。

查看我的其他文章

以上是使用 http-front-cache 提升前端應用程式效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！