前端工程化资源预加载

最新推荐文章于 2025-12-06 22:07:37 发布

原创

最新推荐文章于 2025-12-06 22:07:37 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

资源预加载

1、通过函数实现

/**
 * 并发预加载文件（支持图片、字体、脚本、样式等）
 * @param {string[]} files - 文件 URL 数组
 * @param {number} maxConcurrent - 最大并发数，默认 3
 * @returns {Promise<{ loaded: string[], failed: { url: string, error: string }[] }>}
 */
export async function preloadFiles(files, maxConcurrent = 3) {
   
   
    // 输入验证
    if (!files || !Array.isArray(files) || files.length === 0) {
   
   
        throw new Error('必须提供有效的文件数组');
    }

    if (typeof maxConcurrent !== 'number' || maxConcurrent < 1) {
   
   
        throw new Error('maxConcurrent 必须是大于 0 的数字');
    }

    // 去重 + 过滤无效 URL
    const uniqueFiles = [...new Set(files)].filter(file => {
   
   
        try {
   
   
            new URL(file);
            return true;
        } catch {
   
   
            console.warn(`无效的 URL: ${
     
     file}`);
            return false;
        }
    });

    if (uniqueFiles.length === 0) {
   
   
        return {
   
    loaded: [], failed: [] };
    }

    const results = {
   
   
        loaded: [],
        failed: []
    };

    // 使用索引代替 shift()，避免 O(n) 操作
    let currentIndex = 0;

    // 根据扩展名确定 as 类型
    const