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