AI导哈

性能优化演示工具

一个展示Quicklink和Guess.js性能优化技术的演示项目，用于MCP调试和路由问题排查。

  • by zhangzhimingwork
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 zhangzhimingwork/chrome-mcp-demo

使用说明

Chrome MCP Demo

这是一个使用 Vite + React + TypeScript 构建的演示项目，展示了 Quicklink、Guess.js 性能优化技术，以及一个用于 MCP 调试的路由问题场景。

功能特点

1. 性能优化

Quicklink 预加载（自定义实现）

  • 自动预加载视口中可见的链接
  • 在浏览器空闲时间进行预加载
  • 提升页面导航速度
  • 使用 IntersectionObserver 和 requestIdleCallback API

Guess.js 预测性预取（概念演示）

  • 基于用户行为预测下一步可能访问的页面
  • 智能预加载最可能访问的资源
  • 提供更流畅的用户体验

2. MCP 调试场景

项目中故意设置了一个路由配置错误：

  • 问题描述：导航链接指向 /brokenroute，但路由配置为 /broken-route-wrong-path
  • 预期结果：点击 "Broken Page" 链接会出现 404 错误
  • 调试目的：演示如何使用 Chrome DevTools MCP 工具排查路由问题

技术栈

  • Vite - 快速的前端构建工具
  • React 18 - UI 框架
  • TypeScript - 类型安全的 JavaScript 超集
  • React Router v6 - 客户端路由
  • 自定义 Quicklink - 智能链接预加载（完全自研，兼容 React 18）
  • Guess.js 概念 - 预测性预取框架（概念演示）

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览生产构建

npm run preview

项目结构

chrome-mcp-demo/
├── src/
│   ├── pages/          # 页面组件
│   │   ├── Home.tsx    # 首页（包含 Quicklink 实现）
│   │   ├── About.tsx   # 关于页面
│   │   ├── Products.tsx # 产品页面
│   │   └── BrokenRoute.tsx # 问题路由页面
│   ├── utils/          # 工具函数
│   │   └── quicklink.ts # 自定义 Quicklink 实现
│   ├── App.tsx         # 主应用组件（包含路由配置）
│   ├── App.css         # 应用样式
│   ├── main.tsx        # 应用入口
│   └── index.css       # 全局样式
├── index.html          # HTML 模板
├── package.json        # 项目依赖
├── tsconfig.json       # TypeScript 配置
└── vite.config.ts      # Vite 配置

使用 MCP 调试

  1. 启动开发服务器：npm run dev
  2. 打开浏览器访问应用
  3. 点击导航栏的 "Broken Page" 链接
  4. 观察页面显示空白或 404
  5. 使用 Chrome DevTools MCP 工具：
    • 检查 Network 标签中的请求
    • 查看 Console 中的错误信息
    • 对比 src/App.tsx 中的路由配置和导航链接
    • 找出路径不匹配的问题：/brokenroute vs /broken-route-wrong-path

性能优化说明

自定义 Quicklink 实现原理

由于官方 quicklink 库不兼容 React 18，本项目实现了一个自定义版本，核心特性包括：

  1. 智能检测：使用 IntersectionObserver API 监听视口中的链接
  2. 空闲预加载：利用 requestIdleCallback 在浏览器空闲时预加载资源
  3. 避免重复：追踪已预加载的链接，避免重复加载
  4. 降级方案：在不支持新 API 的浏览器中使用 setTimeout 降级
  5. 灵活配置：支持自定义优先级、origins、忽略规则等

技术实现：

  • 使用 <link rel="prefetch"> 标签进行资源预加载
  • IntersectionObserver 监听链接的可见性
  • requestIdleCallback 确保在浏览器空闲时执行
  • TypeScript 类型安全

Guess.js 概念

虽然完整的 Guess.js 需要 Google Analytics 数据和 webpack 插件支持，本项目通过 console.log 演示了预测性预取的概念：

  • 基于用户当前页面预测下一步导航
  • 提前加载最可能访问的资源
  • 减少用户等待时间

验证 Quicklink 功能

打开浏览器开发者工具的 Network 标签：

  1. 访问首页
  2. 查看 Network 标签，筛选类型为 "prefetch"
  3. 你会看到导航栏中的链接被自动预加载
  4. 点击任意导航链接，页面会更快地加载

注意事项

  • 自定义 Quicklink 实现与官方版本功能相似，但更轻量且完全兼容 React 18
  • Guess.js 在本项目中仅作概念演示，完整实现需要额外的分析数据和配置
  • 路由错误是故意设计的，用于 MCP 调试演示

License

MIT

相关 MCP