// 性能优化配置 export const performanceConfig = { // 缓存配置 cache: { // API 缓存时间 (秒) apiCacheDuration: 3600, // 1小时 // ISR 重新验证时间 (秒) isrRevalidate: 3600, // 1小时 // 静态资源缓存时间 staticAssetsCacheDuration: 86400, // 24小时 }, // 预加载配置 prefetch: { // 关键页面列表 criticalPages: ['/products', '/news', '/contact', '/support', '/about'], // 预加载延迟 (毫秒) prefetchDelay: 100, // 关键图片列表 criticalImages: [ '/images/hero-bg.jpg', '/images/cloud-services.jpg', '/images/aws-logo.png', '/images/server-room.jpg', ], }, // 图片优化配置 images: { // 图片质量 quality: 85, // 响应式图片断点 breakpoints: [640, 768, 1024, 1280, 1536], // 图片格式优先级 formats: ['webp', 'avif', 'jpg', 'png'], // 懒加载距离 lazyLoadRootMargin: '50px', }, // 代码分割配置 codeSplitting: { // 重要组件预加载 importantComponents: [ 'Header', 'Footer', 'NewsArticleServerComponent', 'ProductsServerComponent', ], // 延迟加载的组件 lazyComponents: [ 'ContactForm', 'NewsletterSubscribe', 'ChatWidget', ], }, // 性能监控配置 monitoring: { // Core Web Vitals 阈值 coreWebVitals: { lcp: 2500, // Largest Contentful Paint (ms) fid: 100, // First Input Delay (ms) cls: 0.1, // Cumulative Layout Shift }, // 启用性能监控 enabled: process.env.NODE_ENV === 'production', // 性能数据上报URL reportUrl: process.env.NEXT_PUBLIC_PERFORMANCE_API, }, // CDN 配置 cdn: { // 静态资源CDN域名 domain: process.env.NEXT_PUBLIC_CDN_DOMAIN || '', // 图片CDN域名 imageDomain: process.env.NEXT_PUBLIC_IMAGE_CDN_DOMAIN || '', // 启用CDN enabled: process.env.NODE_ENV === 'production', }, // 压缩配置 compression: { // 启用gzip压缩 gzip: true, // 启用brotli压缩 brotli: true, // 压缩级别 level: 6, // 最小压缩文件大小 threshold: 1024, }, }; // 性能优化工具函数 export class PerformanceOptimizer { // 预加载关键资源 static preloadCriticalResources() { if (typeof window === 'undefined') return; // 预加载关键图片 performanceConfig.prefetch.criticalImages.forEach(src => { // 检查是否已经存在相同的预加载链接 if (!document.querySelector(`link[rel="preload"][as="image"][href="${src}"]`)) { const link = document.createElement('link'); link.rel = 'preload'; link.as = 'image'; link.href = src; document.head.appendChild(link); } }); // 预加载关键字体 const criticalFonts = [ '/fonts/inter-var.woff2', ]; criticalFonts.forEach(href => { // 检查是否已经存在相同的预加载链接 if (!document.querySelector(`link[rel="preload"][as="font"][href="${href}"]`)) { const link = document.createElement('link'); link.rel = 'preload'; link.as = 'font'; link.type = 'font/woff2'; link.crossOrigin = 'anonymous'; link.href = href; document.head.appendChild(link); } }); } // 监控页面性能 static monitorPerformance() { if (typeof window === 'undefined' || !performanceConfig.monitoring.enabled) return; // 监控Core Web Vitals (需要安装 web-vitals 包) try { // 动态导入web-vitals以避免类型错误 const loadWebVitals = async () => { try { const webVitals = await import('web-vitals'); webVitals.onCLS(this.sendToAnalytics); // onFID已被onINP替代 if ('onINP' in webVitals) { (webVitals as any).onINP(this.sendToAnalytics); } else if ('onFID' in webVitals) { (webVitals as any).onFID(this.sendToAnalytics); } webVitals.onLCP(this.sendToAnalytics); } catch (err) { console.log('web-vitals not available'); } }; loadWebVitals(); } catch (error) { console.log('web-vitals not available'); } // 监控导航时间 window.addEventListener('load', () => { setTimeout(() => { const navigationTiming = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming; if (navigationTiming) { const metrics = { dns: navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart, tcp: navigationTiming.connectEnd - navigationTiming.connectStart, request: navigationTiming.responseStart - navigationTiming.requestStart, response: navigationTiming.responseEnd - navigationTiming.responseStart, dom: navigationTiming.domContentLoadedEventEnd - navigationTiming.domContentLoadedEventStart, load: navigationTiming.loadEventEnd - navigationTiming.loadEventStart, total: navigationTiming.loadEventEnd - navigationTiming.fetchStart, }; console.log('页面性能指标:', metrics); this.sendPerformanceData(metrics); } }, 0); }); } // 发送性能数据到分析服务 static sendToAnalytics(metric: any) { if (performanceConfig.monitoring.reportUrl) { fetch(performanceConfig.monitoring.reportUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(metric), }).catch(err => console.warn('性能数据上报失败:', err)); } } // 发送性能数据 static sendPerformanceData(data: any) { if (performanceConfig.monitoring.reportUrl) { fetch(performanceConfig.monitoring.reportUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ type: 'navigation', data }), }).catch(err => console.warn('性能数据上报失败:', err)); } } // 优化图片加载 static optimizeImageLoading() { if (typeof window === 'undefined') return; // 创建Intersection Observer监听图片懒加载 const imageObserver = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target as HTMLImageElement; if (img.dataset.src) { img.src = img.dataset.src; img.removeAttribute('data-src'); imageObserver.unobserve(img); } } }); }, { rootMargin: performanceConfig.images.lazyLoadRootMargin, } ); // 观察所有延迟加载的图片 document.querySelectorAll('img[data-src]').forEach(img => { imageObserver.observe(img); }); // 在页面卸载时断开Observer const cleanup = () => { imageObserver.disconnect(); }; // 监听页面卸载事件 window.addEventListener('beforeunload', cleanup); // 返回清理函数以便手动调用 return cleanup; } // 预热缓存 static warmupCache(urls: string[]) { if (typeof window === 'undefined') return; urls.forEach(url => { // 使用fetch预热缓存,但不等待响应 fetch(url, { method: 'HEAD', mode: 'no-cors' }).catch(() => { // 忽略错误,这只是预热缓存 }); }); } // 延迟加载非关键资源 static deferNonCriticalResources() { if (typeof window === 'undefined') return; // 延迟加载第三方脚本 setTimeout(() => { // 可以在这里加载分析脚本、客服组件等 interface ScriptConfig { src: string; async?: boolean; } const scripts: ScriptConfig[] = [ // 示例:{ src: 'https://example.com/analytics.js', async: true }, ]; scripts.forEach(script => { // 检查脚本是否已经存在 if (!document.querySelector(`script[src="${script.src}"]`)) { const scriptElement = document.createElement('script'); scriptElement.src = script.src; scriptElement.async = script.async || true; document.head.appendChild(scriptElement); } }); }, 3000); // 3秒后加载 } } // 页面加载优化Hook let optimizationInitialized = false; let imageLoadingCleanup: (() => void) | null = null; export function usePageLoadOptimization() { if (typeof window !== 'undefined' && !optimizationInitialized) { optimizationInitialized = true; // 预加载关键资源 setTimeout(() => { PerformanceOptimizer.preloadCriticalResources(); }, performanceConfig.prefetch.prefetchDelay); // 监控性能 PerformanceOptimizer.monitorPerformance(); // 优化图片加载 imageLoadingCleanup = PerformanceOptimizer.optimizeImageLoading() || null; // 延迟加载非关键资源 PerformanceOptimizer.deferNonCriticalResources(); // 页面卸载和路由变化时清理 const cleanup = () => { optimizationInitialized = false; if (imageLoadingCleanup) { imageLoadingCleanup(); imageLoadingCleanup = null; } // 清理预加载的脚本和链接 try { const preloadedScripts = document.querySelectorAll('script[data-perf-preload]'); const preloadedLinks = document.querySelectorAll('link[data-perf-preload]'); preloadedScripts.forEach(script => { if (script.parentNode) { script.parentNode.removeChild(script); } }); preloadedLinks.forEach(link => { if (link.parentNode) { link.parentNode.removeChild(link); } }); } catch (error) { console.warn('清理预加载资源时出错:', error); } }; // 监听各种页面卸载和路由变化事件 window.addEventListener('beforeunload', cleanup); // 监听 Next.js 路由变化 (用于 SPA 导航) if (typeof window !== 'undefined' && window.history) { const originalPushState = window.history.pushState; const originalReplaceState = window.history.replaceState; window.history.pushState = function(...args) { cleanup(); return originalPushState.apply(this, args); }; window.history.replaceState = function(...args) { cleanup(); return originalReplaceState.apply(this, args); }; window.addEventListener('popstate', cleanup); } return cleanup; } }