cocosCreator导出Web-Mobile工程资源加载时间分析

我们使用cocosCreator导出Web-Mobile工程，加载时间长，从而导致用户体验差。所以解决加载是个比较重要的事情。

优化加载时间，首先我们得知道是什么原因导致了加载时间长。

打开浏览器F12查看加载时间

我们可以直接通过打开浏览器开发者模式(快捷键F12),选择Network(网络)这一栏，就可以看到所有我们工程所有的请求，已经请求资源大小和时间。

这里其实也只能看到加载时间一共花了多长时间，但是并不知道具体的加载过程。

浏览器控制台可运行的js脚本

脚本

我们可以通过这个脚本来分析cocos Creator Web-Mobile工程的资源加载情况，按文件大小、等待时间、下载时间等分类，更方便我们查看。

(function() {
    const resources = performance.getEntriesByType('resource');
    const result = resources.map(res => {
        const sizeKB = res.encodedBodySize / 1024;
        const totalTime = res.duration.toFixed(2);
        const waitTime = (res.responseStart - res.startTime).toFixed(2);
        const downloadTime = (res.responseEnd - res.responseStart).toFixed(2);
        return {
            name: res.name.split('/').pop(),
            type: res.initiatorType,
            sizeKB: sizeKB.toFixed(2),
            totalTime: parseFloat(totalTime),
            waitTime: parseFloat(waitTime),
            downloadTime: parseFloat(downloadTime)
        };
    });

    // 按总耗时排序
    result.sort((a, b) => b.totalTime - a.totalTime);

    console.table(result);

    // 统计小图耗时异常的资源 
    const smallFiles = result.filter(r => r.sizeKB < 50 && r.totalTime > 100);
    if (smallFiles.length > 0) {
        console.log('⚠️ 小文件耗时异常（<50KB，总耗时>100ms）:');
        console.table(smallFiles);
    } else {
        console.log('✅ 小文件耗时正常');
    }
})();

我这里添加了判断小文件耗时异常的代码，如果小文件耗时超过100ms，就会打印出来。这个地方的阈值可以根据自己的需求进行修改。

使用方法

打开你的 Web-Mobile 项目页面，这里建议将项目上传到服务器后查看，或者使用本地服务器查看。
打开浏览器开发者工具 → Console。
粘贴上面的脚本并回车运行。
脚本会输出所有资源的文件名、类型、大小、总耗时、等待时间、下载时间以及异常列表，方便排查。

浏览器警告
如果在粘贴代码时遇到浏览器输出如下警告：

arning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below and hit Enter to allow pasting.

或者是

警告: 不要将代码粘贴到不了解或尚未审阅自己的 DevTools 控制台中。这可能导致攻击者窃取你的身份或控制你的计算机。请在下面键入“允许粘贴”，然后按 Enter 以允许粘贴。

解决方法

在 Console 面板输入：
1
allow pasting
然后回车。
之后再粘贴你的脚本就可以正常执行了

字段介绍

字段	说明
name	资源名称
type	资源类型
sizeKB	资源大小（KB）
totalTime	从发起请求到完全加载完成的总耗时（ms）
waitTime	从请求发出到服务器开始返回的等待时间（ms），主要受网络延迟、服务器响应速度影响
downloadTime	实际下载资源的时间（ms），主要受文件大小和带宽影响

分析加载情况

加载慢

查看waitTime,如果waitTime比downloadTime高，说明主要是网络延迟或者服务器响应慢
查看downloadTime,如果downloadTime占总耗时高，说明实际下载速度慢(带宽/服务器问题)。

找出首屏加载瓶颈

按 totalTime 排序 → 排前几的资源就是加载慢的关键资源。
如果大图 totalTime 很短，而小图 totalTime 长 → 很可能是：

浏览器并发限制（文件排队等待）
网络延迟占比大（文件下载快，但请求等待慢）
文件没有缓存或 CDN 未命中