Dalam aplikasi bahagian hadapan moden, prestasi adalah faktor utama dalam pengalaman pengguna. Cara yang berkesan untuk meningkatkan prestasi adalah dengan cache hasil perkhidmatan (permintaan HTTP) fungsi, dengan itu mengurangkan permintaan rangkaian yang berlebihan dan pengiraan.

Artikel ini akan meneroka utiliti http-front-cache, yang menyediakan kaedah caching bahagian hadapan yang mudah dan cekap. By the way, ia sumber terbuka ?

Apakah itu http-front-cache?

http-front-cache ialah utiliti untuk menyimpan cache hasil fungsi perkhidmatan dalam penyemak imbas. Walau bagaimanapun, adalah penting untuk menggunakan utiliti ini dengan berhati-hati dan mematuhi sekatan tertentu:

1. Data yang hendak dicache tidak boleh terlalu besar.
2. Data tidak boleh mengandungi maklumat sensitif.
3. Data tidak boleh berubah terlalu kerap.
4. Parameter perkhidmatan tidak boleh berubah terlalu kerap (jika ia berubah terlalu kerap, cache tidak akan digunakan).

Secara lalai, http-front-cache menyediakan dua fungsi pembantu:

cacheFactory: Fungsi kilang cache boleh diperluaskan yang menerima pembekal (lokasi cache disimpan) ke data cache. Ini membolehkan anda memanjangkan mekanisme caching dan menyimpan cache di tempat yang diperlukan, seperti localStorage, sessionStorage, IndexedDB, cookie, memori, dsb.

cacheOnSessionStorage: cacheOnSessionStorage ialah fungsi boleh cache, sedia untuk digunakan yang mengambil cacheFactory dan mentakrifkan sessionStorage sebagai pembekal. Ia adalah contoh ciri cacheFactory. cacheOnSessionStorage dicipta kerana sessionStorage ialah salah satu penyedia data cache yang paling biasa digunakan di bahagian hadapan.

Pemasangan

Untuk bermula dengan http-front-cache anda boleh memasangnya melalui npm:

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

Cara menggunakan http-front-cache

Anda mungkin perasan bahawa terdapat dua cara untuk menggunakan http-front-cache:

1) Gunakan 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 返回的數據
});

// 導出 cachedFetchData 并根據需要使用

Dalam contoh ini, kami mentakrifkan fungsi perkhidmatan fetchData yang mendapat data daripada API. Kami kemudian menggunakan cacheOnSessionStorage untuk cache hasil fungsi ini selama 5 minit. Apabila cachedFetchData dipanggil, ia menyemak cache sebelum membuat permintaan rangkaian.

Suka artikel ini? Jika ya, jangan lupa like ?? dan ikuti saya untuk terus update. Saya akan terus mencipta lebih banyak kandungan yang serupa

2) Gunakan sambungan pembekal tersuai http-front-cache

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

Dalam contoh ini, kami mentakrifkan pembekal tersuai menggunakan kaedah getItem, setItem dan removeItem. Kami kemudian menggunakan cacheFactory untuk mencipta fungsi cache yang menggunakan pembekal tersuai. Data yang anda perlukan juga boleh dicache. xP

Beli saya secawan kopi ?. Semoga bantuan saya dapat membantu anda. ?

Kesimpulan

http-front-cache ialah utiliti berkuasa yang boleh membantu anda meningkatkan prestasi aplikasi web anda dengan menyimpan cache hasil fungsi perkhidmatan.

Untuk mendapatkan maklumat lanjut dan kemas kini terkini, lihat dokumentasi penuh di GitHub.

Lihat artikel saya yang lain

Atas ialah kandungan terperinci Tingkatkan Prestasi Apl FrontEnd Anda dengan http-front-cache. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!