@jswork/preload-kit NPM

preload-kit

Lightweight web resource preloader with priority and type detection.

installation

yarn add @jswork/preload-kit

usage

import PreloadKit from '@jswork/preload-kit';

const loader = new PreloadKit({
  maxConcurrent: 4,
  maxPagesToPreload: 3, // 前 3 页优先加载
  debug: true,
  onProgress: (progress, loaded, total) => {
    console.log(`🚀 Progress: ${(progress * 100).toFixed(1)}% (${loaded}/${total})`);
  }
});

// 👇 高优先级资源（手动设置 priority）
loader.addResource({
  url: '/important/assets/splash-screen.png',
  type: 'image',
  priority: 100, // ⬅️ 手动设置极高优先级
});

loader.addResource({
  url: '/common/core.js',
  type: 'js',
  priority: 90, // ⬅️ 手动设置高优先级
});

// 👇 带 page 的资源（自动计算优先级）
loader.addResource({ url: '/page1/image1.jpg', group: 'page1' });
loader.addResource({ url: '/page1/style.css', group: 'page1' });
loader.addResource({ url: '/page2/video.mp4', group: 'page2' });
loader.addResource({ url: '/page3/data.json', group: 'page3' });

// 👇 普通资源（无分组，默认 priority=1）
loader.addResource({ url: '/favicon.ico' });
loader.addResource({ url: '/analytics.js' });
loader.addResource({ url: '/fonts/roboto.woff2', type: 'font' });

// 开始预加载
loader.start();