Console 性能分析方法

// 获取所有请求并按类型分类
const entries = performance.getEntriesByType("resource");

const stats = entries.reduce((acc, e) => {
  const url = new URL(e.name);
  let type = "other";

  if (url.pathname.endsWith(".vue")) type = "vue";
  else if (url.pathname.endsWith(".js")) type = "js";
  else if (url.pathname.endsWith(".ts")) type = "ts";
  else if (url.pathname.endsWith(".css")) type = "css";
  else if (
    url.pathname.includes("node_modules") ||
    url.pathname.includes(".vite")
  )
    type = "node_modules";

  acc[type] = (acc[type] || 0) + 1;
  return acc;
}, {});

console.table(stats);
console.log("总请求数:", entries.length);

// 按目录路径统计请求
const entries = performance.getEntriesByType("resource");

const pathStats = entries.reduce((acc, e) => {
  const url = new URL(e.name);
  const path = url.pathname;

  let category;
  if (path.includes("node_modules") || path.includes(".vite/deps")) {
    category = "📦 node_modules";
  } else if (path.includes("/src/views/")) {
    category = "📄 src/views (页面)";
  } else if (path.includes("/src/components/")) {
    category = "🧩 src/components (组件)";
  } else if (path.includes("/src/")) {
    category = "📁 src/other";
  } else {
    category = "❓ other";
  }

  acc[category] = (acc[category] || 0) + 1;
  return acc;
}, {});

console.table(pathStats);

// 查看哪些 node_modules 请求没有被预构建
performance
  .getEntriesByType("resource")
  .filter((e) => e.name.includes("node_modules") || e.name.includes(".vite"))
  .map((e) => new URL(e.name).pathname)
  .forEach((p) => console.log(p));

// 假设 harData 是你的 HAR JSON 数据
// const harData = { ... };

const entries = harData.log.entries;

// 1. 总请求统计
console.log("📊 总请求数:", entries.length);

// 2. 按文件类型统计
const typeStats = {};
entries.forEach((e) => {
  const url = e.request.url;
  let type = "other";
  if (url.includes(".js") || url.includes("type=module")) type = "js";
  else if (url.includes(".vue")) type = "vue";
  else if (url.includes(".css")) type = "css";
  else if (url.includes(".ts")) type = "ts";
  typeStats[type] = (typeStats[type] || 0) + 1;
});
console.log("\n📁 按文件类型:");
console.table(typeStats);

// 3. 按路径分类统计
const pathStats = {};
entries.forEach((e) => {
  const url = e.request.url;
  let category;
  if (url.includes(".vite/deps")) category = "📦 .vite/deps (预构建)";
  else if (url.includes("node_modules"))
    category = "📦 node_modules (未预构建)";
  else if (url.includes("/src/views/")) category = "📄 src/views";
  else if (url.includes("/src/components/")) category = "🧩 src/components";
  else if (url.includes("/src/")) category = "📁 src/other";
  else category = "❓ other";
  pathStats[category] = (pathStats[category] || 0) + 1;
});
console.log("\n📂 按目录分类:");
console.table(pathStats);

// 4. 找出请求最多的包（关键！）
const packageStats = {};
entries.forEach((e) => {
  const url = e.request.url;
  const match = url.match(/node_modules\/(@[^\/]+\/[^\/]+|[^\/]+)/);
  if (match) {
    const pkg = match[1];
    packageStats[pkg] = (packageStats[pkg] || 0) + 1;
  }
});
const sortedPackages = Object.entries(packageStats)
  .sort((a, b) => b[1] - a[1])
  .slice(0, 20);
console.log("\n🔥 请求最多的包 TOP 20:");
console.table(
  sortedPackages.map(([pkg, count]) => ({ 包名: pkg, 请求数: count })),
);

(() => {
  const nav = performance.getEntriesByType("navigation")[0];
  const paint = performance.getEntriesByType("paint");
  const resources = performance.getEntriesByType("resource");

  const fp = paint.find((p) => p.name === "first-paint");
  const fcp = paint.find((p) => p.name === "first-contentful-paint");

  console.log("=== 📊 性能指标 ===");
  console.log(`⚪ 白屏时间 (First Paint): ${fp?.startTime.toFixed(2)}ms`);
  console.log(`📝 首次内容渲染 (FCP): ${fcp?.startTime.toFixed(2)}ms`);
  console.log(`📄 DOM 加载完成: ${nav.domContentLoadedEventEnd.toFixed(2)}ms`);
  console.log(`✅ 页面完全加载: ${nav.loadEventEnd.toFixed(2)}ms`);
  console.log(`📦 资源请求数: ${resources.length}`);
  console.log(
    `📊 JS 请求数: ${resources.filter((r) => r.initiatorType === "script").length}`,
  );
})();

const navigation = performance.getEntriesByType("navigation")[0];
const paintMetrics = performance.getEntriesByType("paint");

console.table({
  "DNS 查询": navigation.domainLookupEnd - navigation.domainLookupStart,
  "TCP 连接": navigation.connectEnd - navigation.connectStart,
  "DOM 解析完成": navigation.domContentLoadedEventEnd - navigation.fetchStart,
  页面完全加载: navigation.loadEventEnd - navigation.fetchStart,
});

paintMetrics.forEach((paint) => {
  console.log(`${paint.name}: ${paint.startTime.toFixed(2)}ms`);
});

// 找出加载最慢的资源
const resources = performance.getEntriesByType("resource");

const slowResources = resources
  .map((r) => ({
    name: r.name.split("/").pop().substring(0, 50),
    duration: r.duration.toFixed(2) + "ms",
    size: (r.transferSize / 1024).toFixed(2) + "KB",
  }))
  .sort((a, b) => parseFloat(b.duration) - parseFloat(a.duration))
  .slice(0, 10);

console.log("🐢 加载最慢的资源 TOP 10:");
console.table(slowResources);

// 优化前：立即执行
if (result) result().then((mod) => (mod.default.name = path));
return result;

// 优化后：延迟执行
return () =>
  result().then((mod) => {
    mod.default.name = path;
    return mod;
  });

// 统计预构建 vs 未预构建的请求
const entries = performance.getEntriesByType("resource");

const viteDepStats = {
  "已预构建 (.vite/deps)": 0,
  "未预构建 (node_modules)": 0,
};

entries.forEach((e) => {
  if (e.name.includes(".vite/deps")) {
    viteDepStats["已预构建 (.vite/deps)"]++;
  } else if (e.name.includes("node_modules")) {
    viteDepStats["未预构建 (node_modules)"]++;
  }
});

console.table(viteDepStats);