|
|
@@ -87,6 +87,9 @@ export function progressTrackingPlugin() {
|
|
|
(dynamicImports.loaded / dynamicImports.total) * 0.15 : 0;
|
|
|
const preload = preloadProgress.total > 0 ?
|
|
|
(preloadProgress.loaded / preloadProgress.total) * 0.15 : 0;
|
|
|
+
|
|
|
+ console.log(clientProgress.loaded , clientProgress.total)
|
|
|
+ console.log(server,client,dynamic,preload)
|
|
|
|
|
|
const totalProgress = (server + client + dynamic + preload) * 100;
|
|
|
bar.style.width = Math.min(totalProgress, 100) + '%';
|
|
|
@@ -145,18 +148,30 @@ export function progressTrackingPlugin() {
|
|
|
updateProgressBar();
|
|
|
}
|
|
|
|
|
|
- // 4. 监控客户端资源加载 (通过Performance API)
|
|
|
- if (window.PerformanceObserver) {
|
|
|
- const observer = new PerformanceObserver((list) => {
|
|
|
- for (const entry of list.getEntries()) {
|
|
|
- if (entry.entryType === 'resource' && entry.initiatorType === 'script' ) {
|
|
|
- clientProgress.loaded++;
|
|
|
- updateProgressBar();
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- observer.observe({ entryTypes: ['resource'] });
|
|
|
- }
|
|
|
+ // 4. 监控客户端资源加载 (通过Performance API)
|
|
|
+ if (window.PerformanceObserver) {
|
|
|
+ const loadedResources = new Set(); // 避免重复计数
|
|
|
+
|
|
|
+ const observer = new PerformanceObserver((list) => {
|
|
|
+ for (const entry of list.getEntries()) {
|
|
|
+ if (entry.entryType === 'resource' && entry.initiatorType === 'script' ) {
|
|
|
+ if (!loadedResources.has(entry.name)) {
|
|
|
+ console.log('entry.name', entry.name)
|
|
|
+ loadedResources.add(entry.name);
|
|
|
+ clientProgress.loaded++;
|
|
|
+
|
|
|
+ // 动态调整总数 - 当发现新资源时增加总数
|
|
|
+ if (clientProgress.loaded > clientProgress.total) {
|
|
|
+ clientProgress.total = clientProgress.loaded;
|
|
|
+ }
|
|
|
+
|
|
|
+ updateProgressBar();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ observer.observe({ entryTypes: ['resource'] });
|
|
|
+ }
|
|
|
|
|
|
// 初始化时统计需要加载的资源
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|