// 使用 Web Vitals 庫(kù)測(cè)量核心指標(biāo)
import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);   // 累積布局偏移
getFID(console.log);   // 首次輸入延遲
getLCP(console.log);   // 最大內(nèi)容繪制

# 使用 Lighthouse 進(jìn)行性能審計(jì)
npx lighthouse https://example.com --view
# 使用 Chrome DevTools Performance 面板
# 使用 WebPageTest 進(jìn)行多地點(diǎn)測(cè)試
# 使用 PageSpeed Insights
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://example.com"

// 使用 modern 圖片格式
<img src="image.webp" alt="描述" 
     srcset="image-400w.webp 400w, image-800w.webp 800w"
     sizes="(max-width: 600px) 400px, 800px"
     loading="lazy">

// 使用 picture 元素提供多種格式
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述" loading="lazy">
</picture>

// Vite 配置優(yōu)化
export default defineConfig({
  build: {
    minify: 'terser', // 使用 terser 進(jìn)行壓縮
    terserOptions: {
      compress: {
        drop_console: true, // 生產(chǎn)環(huán)境移除 console
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          utils: ['lodash-es', 'dayjs'],
        },
      },
    },
  },
});

<!-- 關(guān)鍵資源預(yù)加載 -->
<link rel="preload" href="/fonts/main.woff2" rel="external nofollow"  as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/js/hero.js" rel="external nofollow"  as="script">
<!-- 未來(lái)導(dǎo)航預(yù)獲取 -->
<link rel="prefetch" href="/js/about.js" rel="external nofollow" >
<link rel="preconnect"  rel="external nofollow" >
<!-- 智能預(yù)加載 -->
<script>
  // 檢測(cè)用戶意圖，預(yù)加載可能訪問(wèn)的頁(yè)面
  document.addEventListener('mouseover', (e) => {
    if (e.target.tagName === 'A') {
      const url = e.target.href;
      if (isSameOrigin(url)) {
        const link = document.createElement('link');
        link.rel = 'prefetch';
        link.href = url;
        document.head.appendChild(link);
      }
    }
  });
</script>

// 路由級(jí)代碼分割
const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue')
  },
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
    meta: { requiresAuth: true }
  }
];

// 組件級(jí)懶加載
const HeavyChart = defineAsyncComponent({
  loader: () => import('@/components/HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200,
  timeout: 3000
});

// 按需加載第三方庫(kù)
const loadLodash = async () => {
  const _ = await import('lodash-es');
  return _.default;
};

<!-- 實(shí)現(xiàn)虛擬列表處理大量數(shù)據(jù) -->
<template>
  <div class="virtual-list" ref="listContainer">
    <div :style="{ height: totalHeight + 'px' }">
      <div 
        v-for="item in visibleItems" 
        :key="item.id"
        :style="{ 
          transform: `translateY(${item.offset}px)`,
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0
        }"
      >
        <ItemComponent :item="item" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
const props = defineProps({
  items: { type: Array, required: true },
  itemHeight: { type: Number, default: 50 }
});
const listContainer = ref(null);
const scrollTop = ref(0);
const visibleCount = 20;
const totalHeight = computed(() => props.items.length * props.itemHeight);
const visibleItems = computed(() => {
  const start = Math.floor(scrollTop.value / props.itemHeight);
  const end = Math.min(start + visibleCount, props.items.length);
  return props.items
    .slice(start, end)
    .map((item, index) => ({
      ...item,
      offset: (start + index) * props.itemHeight
    }));
});
const handleScroll = () => {
  scrollTop.value = listContainer.value.scrollTop;
};
onMounted(() => {
  listContainer.value.addEventListener('scroll', handleScroll);
});
onUnmounted(() => {
  listContainer.value.removeEventListener('scroll', handleScroll);
});
</script>

// 防抖函數(shù)
function debounce(func, wait, immediate = false) {
  let timeout;
  return function(...args) {
    const later = () => {
      timeout = null;
      if (!immediate) func.apply(this, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(this, args);
  };
}

// 節(jié)流函數(shù)
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 使用示例
const handleScroll = throttle(() => {
  console.log('Scroll position:', window.scrollY);
}, 100);

const handleResize = debounce(() => {
  console.log('Window resized');
  updateLayout();
}, 300);

// 避免內(nèi)存泄漏
class DataFetcher {
  constructor() {
    this.abortController = new AbortController();
    this.cache = new Map();
  }

  async fetchData(url) {
    try {
      const response = await fetch(url, {
        signal: this.abortController.signal
      });
      const data = await response.json();
      this.cache.set(url, data);
      return data;
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Request aborted');
      } else {
        throw error;
      }
    }
  }

  destroy() {
    this.abortController.abort();
    this.cache.clear();
  }
}

// 使用 WeakMap 避免內(nèi)存泄漏
const componentData = new WeakMap();

function registerComponent(component, data) {
  componentData.set(component, data);
  // 當(dāng) component 被垃圾回收時(shí)，data 也會(huì)自動(dòng)釋放
}

// 主線程
const worker = new Worker('./worker.js');

worker.postMessage({
  type: 'PROCESS_DATA',
  data: largeDataSet
});

worker.onmessage = (e) => {
  const result = e.data;
  updateUI(result);
};

// worker.js
self.onmessage = (e) => {
  const { type, data } = e.data;
  
  if (type === 'PROCESS_DATA') {
    const result = heavyComputation(data);
    self.postMessage(result);
  }
};

function heavyComputation(data) {
  // 繁重的計(jì)算邏輯
  return data.map(item => item * 2).filter(x => x > 10);
}

# Nginx HTTP/2 配置
server {
    listen 443 ssl http2;
    server_name example.com;
    # HTTP/2 推送
    http2_push /js/app.js;
    http2_push /css/style.css;
    # 多路復(fù)用優(yōu)化
    tcp_nodelay on;
    tcp_nopush on;
}

// Service Worker 緩存策略
const CACHE_NAME = 'v1';
const CACHE_STRATEGIES = {
  // 緩存優(yōu)先
  static: ['/', '/index.html', '/css/*', '/js/*'],
  
  // 網(wǎng)絡(luò)優(yōu)先
  api: '/api/*',
  
  // 過(guò)期時(shí)間
  images: {
    pattern: '/images/*',
    maxAge: 7 * 24 * 60 * 60 // 7 天
  }
};

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  
  if (CACHE_STRATEGIES.static.some(pattern => url.pathname.includes(pattern))) {
    event.respondWith(cachedFirst(event.request));
  } else if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request));
  } else {
    event.respondWith(staleWhileRevalidate(event.request));
  }
});

async function cachedFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  
  const response = await fetch(request);
  if (response.ok) {
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
  }
  return response;
}

// 請(qǐng)求合并
class RequestBatcher {
  constructor(batchSize = 10, batchDelay = 100) {
    this.batchSize = batchSize;
    this.batchDelay = batchDelay;
    this.queue = [];
    this.timer = null;
  }

  add(request) {
    return new Promise((resolve, reject) => {
      this.queue.push({ request, resolve, reject });
      this.flush();
    });
  }

  flush() {
    if (this.timer) clearTimeout(this.timer);
    
    if (this.queue.length >= this.batchSize) {
      this.executeBatch();
    } else {
      this.timer = setTimeout(() => this.executeBatch(), this.batchDelay);
    }
  }

  async executeBatch() {
    if (this.queue.length === 0) return;
    
    const batch = [...this.queue];
    this.queue = [];
    
    try {
      const responses = await Promise.all(batch.map(item => item.request));
      batch.forEach((item, index) => item.resolve(responses[index]));
    } catch (error) {
      batch.forEach(item => item.reject(error));
    }
  }
}

// 使用示例
const batcher = new RequestBatcher();

// 批量請(qǐng)求
const results = await Promise.all([
  batcher.add(fetch('/api/user/1')),
  batcher.add(fetch('/api/user/2')),
  batcher.add(fetch('/api/user/3'))
]);

# 分析打包體積
npx webpack-bundle-analyzer dist/stats.json
# 使用 source-map-explorer
npx source-map-explorer dist/js/*.js
# Vite 內(nèi)置分析
vite build --analyze

// webpack 配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors',
          chunks: 'all',
        },
        default: {
          minChunks: 2,
          priority: -10,
          reuseExistingChunk: true,
        },
      },
    },
  },
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
  ],
};

// 確保使用 ES 模塊語(yǔ)法
import { debounce, throttle } from 'lodash-es'; // ? 支持 tree shaking
// import _ from 'lodash'; // ? 會(huì)引入整個(gè)庫(kù)

// 使用 sideEffects 配置
// package.json
{
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

// 標(biāo)記純函數(shù)
/*#__PURE__*/
function pureFunction() {
  return 42;
}

// 自定義性能監(jiān)控
class PerformanceMonitor {
  constructor() {
    this.metrics = {};
    this.init();
  }

  init() {
    // 監(jiān)聽(tīng)核心 Web 指標(biāo)
    if ('PerformanceObserver' in window) {
      this.observeLCP();
      this.observeCLS();
      this.observeFID();
    }

    // 監(jiān)聽(tīng)頁(yè)面加載性能
    window.addEventListener('load', () => {
      this.recordLoadPerformance();
    });
  }

  observeLCP() {
    new PerformanceObserver((list) => {
      const entries = list.getEntries();
      const lastEntry = entries[entries.length - 1];
      this.recordMetric('LCP', lastEntry.startTime);
    }).observe({ type: 'largest-contentful-paint', buffered: true });
  }

  observeCLS() {
    let clsValue = 0;
    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
        }
      }
      this.recordMetric('CLS', clsValue);
    }).observe({ type: 'layout-shift', buffered: true });
  }

  recordMetric(name, value) {
    this.metrics[name] = value;
    
    // 發(fā)送到分析服務(wù)
    this.sendToAnalytics(name, value);
  }

  recordLoadPerformance() {
    const timing = performance.timing;
    const loadTime = timing.loadEventEnd - timing.navigationStart;
    this.recordMetric('LoadTime', loadTime);
  }

  sendToAnalytics(name, value) {
    // 發(fā)送到監(jiān)控服務(wù)
    navigator.sendBeacon('/api/performance', 
      JSON.stringify({ metric: name, value, timestamp: Date.now() })
    );
  }

  getReport() {
    return {
      ...this.metrics,
      timestamp: new Date().toISOString(),
      userAgent: navigator.userAgent,
      url: window.location.href
    };
  }
}

// 使用
const monitor = new PerformanceMonitor();

// 全局錯(cuò)誤處理
window.addEventListener('error', (event) => {
  reportError({
    type: 'javascript',
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    error: event.error
  });
});

window.addEventListener('unhandledrejection', (event) => {
  reportError({
    type: 'promise',
    message: event.reason?.message || 'Unhandled promise rejection',
    error: event.reason
  });
});

function reportError(error) {
  // 發(fā)送到錯(cuò)誤監(jiān)控服務(wù)
  navigator.sendBeacon('/api/error', JSON.stringify({
    ...error,
    timestamp: Date.now(),
    url: window.location.href,
    userAgent: navigator.userAgent
  }));
  
  // 可選：記錄到控制臺(tái)
  console.error('Performance Error:', error);
}