缘起
在前端开发过程中，为了提高网站性能，我们通常采用将一些常用的数据或组件缓存到浏览器本地的方式，以减少服务器的请求及时间，并保证用户体验。但是，其中不乏难以维护和使用的缓存方案。因此，在此我们向大家推荐一款优秀的 npm 包：cachemere。
cachemere 概述
cachemere 是一款针对浏览器或服务器端的内存缓存库，具有快速而且高效的访问速度。可应用于各种场景，比如浏览器应用中的数据缓存、图片缓存等等。
cachemere 安装
为了使用 cachemere，你需要先将它安装到你的项目中。你可以通过 npm 包管理器来进行安装：
npm install cachemere --save
如果你使用的是 yarn 包管理器，那么也可以使用以下命令进行安装：
yarn add cachemere
cachemere 的使用
cachemere 的 API 相当简洁明了，只需要借助一个 CacheMere 对象，就可以完成相关操作。下面将为大家详细介绍如何使用此库。
创建 CacheMere 对象
首先，你需要引入依赖：
import CacheMere from 'cachemere';
然后，可以通过以下方式来创建一个 CacheMere 对象：
const myCache = new CacheMere();
设置数据到缓存
设置数据到缓存的方式很简单，只需要将键值对以对象的形式传入即可：
myCache.set('userName', 'Lucy');CacheMere 对象并不会限制你存储的数据类型，你可以存储任何数据类型。
从缓存中获取数据
从缓存中获取数据也是非常容易的：
const userName = myCache.get('userName');如果缓存中不存在该键，将会返回 undefined。
除了 get 方法之外，CacheMere 还提供了一个 keys 方法，可以返回所有当前的缓存键数组：
const allKeys = myCache.keys();
缓存过期与删除
应用中的缓存数据往往是需要定期清理的。CacheMere 提供了一个简单的过期时间方式：
myCache.set('userName', 'Lucy', {
expires: 60 * 1000 // 60 秒后过期
});当时间到达指定时长后，缓存将自动删除。CacheMere 也为缓存过期后的回调函数提供了支持：
myCache.set('userName', 'Lucy', {
expires: 5 * 60 * 1000 // 5 分钟后过期
}, () => {
console.log('缓存数据已过期');
});缓存大小限制
常用的缓存库对于数据大小没有限制，一些大数据的缓存就很容易将资源消耗殆尽。但是，CacheMere 提供了一种非常优雅的缓存大小限制技术。可以在初始化 CacheMere 时，传入最大缓存大小：
const myCache = new CacheMere({ maxCacheSize: 50 * 1024 }); // 最大 50KB当缓存大小达到限制时，CacheMere 将以最近最少使用的策略，清除部分长时间未被使用的缓存数据。
包装异步请求
你可以使用 cachemere 非常简便地为异步请求添加缓存功能。创建一个 get 方法（或使用已有的）：
import axios from 'axios';
const fetchData = async () => {
const res = await axios.get('/api/data');
return res.data;
};然后通过以下方式将其包装：
-- -------------------- ---- -------
----- ------- - --- ------------
----- ------------- - -- -- -
------ --- ----------------- ------- -- -
--- ---- - ------------------------
-- ------ -
------ --------------
-
-----------
--------- -- -
----------------------- ---- - -------- -- - ---- ---
-------------
-------------- -- -
--------------
--
---
--
-- -- ------------- --------------手写的复杂缓存类
如果使用 CacheMere 还无法满足你的需求，那么你可以手动编写一个复杂的缓存类并使用 cachemere 的 lruCache 策略来优化缓存。具体如下：
-- -------------------- ---- -------
------ ---------- - ---------------- - ---- ------------
------ - ----------------- ---------------- - ---- ------------------------
----- ------------ -
------------ - -- - -----
----- - --- ----------- --------- ---------------- ---
---------------- - ---------------------
----------- - -----
------------------ ------------ -
---------- - ------ -- ----------
---------------- - ------------
----- -------- - ---------------------------- -----------------------
---------- - --- ----------- --------- --------- --------- ---------------- ---
-
-------- -
--- ----- - --------------------
-- ------- -
------ ------
-
----- - ------------------------
------ ------------------
-
-------- ------ -------- -
-- ---- --- --------------------- -- ----- ---------- ------- -- ----- ---------- --------- -
-------
-
-- ---- -- ----------- -
-------
-
----- -------- - ----------------------
--- -
------------------- --------- ---------
----------------------- ----------
---------------------------- ---------------------- --------------------------
------------------
- ----- ------- -
------------------
-
-
----------- -
-- ---- -- ----------- -
------ ----------------
-
---------------------------
---------------------------- ---------------------- --------------------------
-
----- ------- -
-------------------
------ -------------------
-
------------ -
----- ----------- - --------------------------
-- ------------ - ------------------ -
--- ------- - ------
----- ---------- -
--- -
--- ----------- - --------------------
-------------------------
- ----- ------- -
------- - ------
------
-
------- - -----
-
-
-
-------------------- -
--- ---- - --
--- ---- --- -- ---------------------------- -
-- ---- --- ---------------------- -
---------
-
---- -- ----------------------- - ---
-
-- ------------------ -
---- - -----------------------
-
------ -----
-
-结尾
本文介绍了 cachemere 的用法，希望这对你有帮助。cachemere 的特性十分优秀，可以应用到各种场景中。如果你在使用时遇到任何问题，也可以通过 npm、GitHub 以及其他渠道来获得帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76494