简介
@shimataro/resource-manager 是一个能够管理 Web 前端资源加载的 npm 包。它支持异步加载、缓存等特性，能极大地提升页面加载速度，减轻服务器压力，同时还能提供更好的用户体验。
安装
使用 npm 进行安装：
--- ------- ---------------------------
或者使用 yarn 进行安装：
---- --- ---------------------------
使用
初始化
在入口文件里初始化 ResourceManager：
------ --------------- ---- ------------------------------ ----- --------------- - --- ----------------- -- --- ---
添加资源
添加通过 AJAX 获取的 CSS 文件：
------------------------------------ - ----- ------ ---- ---------------------------- ---
添加通过 AJAX 获取的 JavaScript 文件：
----------------------------------- - ----- ----- ---- --------------------------- ---
加载资源
异步加载所有资源，并在加载完成后执行回调函数：
----------------------- -- - -- --------------------- ---
使用已加载的资源
通过 ResourceManager.get 方法获取已加载的资源：
----- ----- - ----------------------------- ----- ---- - ----------------------------
模块化加载
使用 webpack 等工具进行模块化加载时，可以使用 ResourceManager.resolve 方法获取资源 URL：
------ --------------- ---- ------------------------------ ----- --------------- - --- ----------------- ------------- --------------- --- --------------------------------------- - ----- --------- ----- -------------- --- ----- ----------- - ------------------------------------ -- -- --------------------------
缓存
ResourceManager 内置了缓存功能，可以配置缓存的类型：
------ --------------- ---- ------------------------------ ----- --------------- - --- ----------------- ---------- --------------- -- -- ------------ ---- --- ----------------------------------------- - ----- ------- ---- ----------------------------- --- ----------------------- -- - ------------------------------------ -- -- ---------- --- -- --- ----- ---------------- - ---------------------------------------- -- ------ ----------
结语
@shimataro/resource-manager 能够满足大多数前端 Web 开发工作中资源异步加载的需求，能让页面更快地加载，同时减轻服务器压力和提供更好的用户体验。我们建议您在开发中使用该工具。
示例代码
下面是一个完整的示例代码：
------ --------------- ---- ------------------------------ ----- --------------- - --- ----------------- ---------- ----------------- ------------- --------------- --- ------------------------------------ - ----- ------ ---- ---------------------------- --- ----------------------------------- - ----- ----- ---- --------------------------- --- --------------------------------------- - ----- --------- ----- -------------- --- ------------------------------------- - ----- ------- ---- ----------------------------- --- ----------------------- -- - ----- ----- - ----------------------------- ----- ---- - ---------------------------- ----- -------- - -------------------------------- ----- ------ - ------------------------------ ------------------ ----- --------- -------- -------------------------------- --- ------------- -- - ----- ------------ - ------------------------------------ -------------------------- -- -------
注意，由于 sessionstorage 是保存在单个 tab 页里的，上面这段代码需要放在同一个 tab 页里才能测试到缓存的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600579cc81e8991b448eb380