blank/vite-plugin-compile-progress.js

export function progressTrackingPlugin() {  
  let server  
  const moduleStats = {  
    total: 0,  
    processed: 0,  
    pending: new Set()  
  }  
  
  return {  
    name: 'progress-tracking',  
    apply: 'serve',  
    enforce: 'pre',  
    configureServer(_server) {  
      server = _server  
    },  
    async transform(code, id) {  
      if (server && id) {  
        moduleStats.total++  
        moduleStats.pending.add(id)  
  
        server.ws.send('progress:update', {  
          total: moduleStats.total,  
          processed: moduleStats.processed,  
          current: id  
        })  
  
        await server.waitForRequestsIdle(id)  
  
        moduleStats.processed++  
        moduleStats.pending.delete(id)  
  
        server.ws.send('progress:update', {  
          total: moduleStats.total,  
          processed: moduleStats.processed,  
          current: null  
        })  
      }  
    },  
    transformIndexHtml: {  
      order: 'pre',  
      handler(html, ctx) {  
        return {  
          html,  
          tags: [  
            {  
              tag: 'style',  
              children: `  
                #vite-progress-bar {  
                  position: fixed;  
                  top: 0;  
                  left: 0;  
                  width: 0%;  
                  height: 3px;  
                  background: #646cff;  
                  transition: width 0.3s ease;  
                  z-index: 9999;  
                  opacity: 1;  
                }  
                #vite-progress-bar.complete {  
                  opacity: 0;  
                  transition: opacity 0.5s ease;  
                }  
                #vite-progress-status {  
                  position: fixed;  
                  top: 10px;  
                  right: 10px;  
                  background: rgba(0, 0, 0, 0.8);  
                  color: white;  
                  padding: 8px 12px;  
                  border-radius: 4px;  
                  font-size: 12px;  
                  font-family: monospace;  
                  z-index: 10000;  
                  display: none;  
                }  
              `,  
              injectTo: 'head'  
            },  
            {  
              tag: 'div',  
              attrs: { id: 'vite-progress-bar' },  
              injectTo: 'body-prepend'  
            },  
            {  
              tag: 'div',  
              attrs: { id: 'vite-progress-status' },  
              children: 'Loading...',  
              injectTo: 'body-prepend'  
            },  
            {  
              tag: 'script',  
              attrs: { type: 'module' },  
              children: `  
                if (import.meta.hot) {  
                  // 进度追踪状态  
                  let serverProgress = 0;  
                  let resourcesCompleted = 0;  
                  let estimatedTotal = 0;  
                  let isLoading = true;  
                  let completionTimer = null;  
                  let lastResourceTime = Date.now();  
  
                  // DOM 元素引用  
                  const progressBar = document.getElementById('vite-progress-bar');  
                  const statusDisplay = document.getElementById('vite-progress-status');  
  
                  // 改进的预估算法  
                  function estimateResourceCount() {  
                    const scripts = document.querySelectorAll('script[src]').length;  
                    const links = document.querySelectorAll('link[href]').length;  
                    const styleSheets = document.querySelectorAll('link[rel="stylesheet"]').length;  
                    const preloadLinks = document.querySelectorAll('link[rel="preload"], link[rel="modulepreload"]').length;  
                      
                    // 更保守的预估，避免过度增长  
                    const baseEstimate = scripts + links + styleSheets + preloadLinks;  
                    const conservativeEstimate = Math.max(baseEstimate + 10, 15); // 只加10个缓冲  
                      
                    return conservativeEstimate;  
                  }  
  
                  // 检测是否完成加载  
                  function checkCompletion() {  
                    const now = Date.now();  
                    const timeSinceLastResource = now - lastResourceTime;  
                      
                    // 如果2秒内没有新资源加载，且服务端完成，认为加载完成  
                    if (serverProgress >= 1.0 && timeSinceLastResource > 2000) {  
                      console.log('Loading appears to be complete - no new resources for 2 seconds');  
                      forceComplete();  
                      return;  
                    }  
                      
                    // 如果进度超过98%且3秒内没有新资源，强制完成  
                    if (serverProgress >= 1.0 && resourcesCompleted >= estimatedTotal * 0.9 && timeSinceLastResource > 3000) {  
                      console.log('Force completing - high progress with no recent activity');  
                      forceComplete();  
                      return;  
                    }  
                  }  
  
                  // 强制完成  
                  function forceComplete() {  
                    if (!isLoading) return;  
                      
                    isLoading = false;  
                    progressBar.style.width = '100%';  
                    statusDisplay.style.display = 'none';  
                    progressBar.classList.add('complete');  
                      
                    console.log('Loading completed!');  
                      
                    setTimeout(() => {  
                      progressBar.style.display = 'none';  
                    }, 1000);  
                  }  
  
                  // 更新进度条和状态显示  
                  function updateProgress() {  
                    if (!progressBar || !statusDisplay || !isLoading) return;  
  
                    // 动态调整权重：服务端完成后，客户端权重增加  
                    const serverWeight = serverProgress < 1.0 ? 0.6 : 0.3;  
                    const clientWeight = serverProgress < 1.0 ? 0.4 : 0.7;  
                      
                    const serverPart = serverProgress * serverWeight;  
                    const clientPart = estimatedTotal > 0 ?   
                      Math.min(resourcesCompleted / estimatedTotal, 1.0) * clientWeight : 0;  
                      
                    let totalProgress = Math.min((serverPart + clientPart) * 100, 100);  
                      
                    // 如果服务端完成且客户端接近完成，给予额外加成  
                    if (serverProgress >= 1.0 && resourcesCompleted >= estimatedTotal * 0.8) {  
                      totalProgress = Math.max(totalProgress, 95);  
                    }  
                      
                    // 更新进度条  
                    progressBar.style.width = totalProgress + '%';  
                      
                    // 更新状态显示  
                    statusDisplay.style.display = 'block';  
                    statusDisplay.textContent =   
                      \`Loading... \${Math.round(totalProgress)}% (\${resourcesCompleted}/\${estimatedTotal} resources)\`;  
                      
                    console.log(\`Progress: Server \${Math.round(serverProgress * 100)}%, Resources \${resourcesCompleted}/\${estimatedTotal}, Total \${Math.round(totalProgress)}%\`);  
                      
                    // 如果接近完成，开始检测完成状态  
                    if (totalProgress >= 95) {  
                      if (completionTimer) clearTimeout(completionTimer);  
                      completionTimer = setTimeout(checkCompletion, 1000);  
                    }  
                  }  
  
                  // 监听服务端编译进度  
                  import.meta.hot.on('progress:update', (data) => {  
                    serverProgress = data.total > 0 ? data.processed / data.total : 0;  
                    updateProgress();  
                  });  
  
                  // 使用 PerformanceObserver 监控资源加载完成  
                  if (window.PerformanceObserver) {  
                    const completedResources = new Set();  
                      
                    const observer = new PerformanceObserver((list) => {  
                      for (const entry of list.getEntries()) {  
                        if (entry.entryType === 'resource') {  
                          const isRelevantResource =   
                            entry.initiatorType === 'script' ||  
                            entry.initiatorType === 'link' ||  
                            entry.initiatorType === 'css' ||  
                            entry.name.includes('.js') ||  
                            entry.name.includes('.css') ||  
                            entry.name.includes('.ts');  
                              
                          if (isRelevantResource && !completedResources.has(entry.name)) {  
                            completedResources.add(entry.name);  
                            resourcesCompleted++;  
                            lastResourceTime = Date.now();  
                              
                            // 更保守的总数调整策略  
                            if (resourcesCompleted > estimatedTotal * 0.9) {  
                              estimatedTotal = Math.max(estimatedTotal, resourcesCompleted + 3); // 只加3个缓冲  
                            }  
                              
                            console.log(\`Resource completed: \${entry.name} (type: \${entry.initiatorType})\`);  
                            updateProgress();  
                          }  
                        }  
                      }  
                    });  
                      
                    observer.observe({ entryTypes: ['resource'] });  
                  }  
  
                  // 初始化  
                  function initialize() {  
                    estimatedTotal = estimateResourceCount();  
                    lastResourceTime = Date.now();  
                    console.log(\`Estimated total resources: \${estimatedTotal}\`);  
                      
                    // 显示初始状态  
                    if (statusDisplay) {  
                      statusDisplay.style.display = 'block';  
                      statusDisplay.textContent = \`Initializing... (0/\${estimatedTotal} resources)\`;  
                    }  
                      
                    updateProgress();  
                  }  
  
                  // 页面加载完成后的处理  
                  function handlePageLoad() {  
                    setTimeout(() => {  
                      // 最终调整预估值  
                      if (resourcesCompleted > 0) {  
                        estimatedTotal = Math.max(resourcesCompleted + 2, estimatedTotal);  
                        console.log(\`Final estimated total: \${estimatedTotal}\`);  
                      }  
                      updateProgress();  
                        
                      // 开始完成检测  
                      setTimeout(checkCompletion, 2000);  
                    }, 1000);  
                  }  
  
                  // 根据文档状态初始化  
                  if (document.readyState === 'loading') {  
                    document.addEventListener('DOMContentLoaded', initialize);  
                    document.addEventListener('load', handlePageLoad);  
                  } else {  
                    setTimeout(initialize, 0);  
                    if (document.readyState === 'complete') {  
                      setTimeout(handlePageLoad, 100);  
                    } else {  
                      document.addEventListener('load', handlePageLoad);  
                    }  
                  }  
  
                  // HMR 更新时重置状态  
                  import.meta.hot.on('vite:beforeUpdate', () => {  
                    console.log('HMR update detected, maintaining progress tracking...');  
                  });  
                }  
              `,  
              injectTo: 'body'  
            }  
          ]  
        }  
      }  
    }  
  }  
}