2
0
Просмотр исходного кода

🐛 fix(progress): 修复资源加载进度计算不准确问题

- 添加Set集合避免资源重复计数
- 动态调整资源总数,当实际加载资源数超过初始总数时自动更新
- 添加调试日志输出资源加载情况和进度计算中间值

✨ feat(progress): 优化进度计算逻辑

- 实现资源加载总数动态调整机制
- 改进客户端资源加载跟踪算法,提高进度准确性
yourname 8 месяцев назад
Родитель
Сommit
8b124622e8
1 измененных файлов с 27 добавлено и 12 удалено
  1. 27 12
      vite-plugin-compile-progress.js

+ 27 - 12
vite-plugin-compile-progress.js

@@ -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', () => {