vite-plugin-preloader 2.0.0 → 2.0.1

package/README.md

@@ -1,6 +1,6 @@
 # 🚀 vite-plugin-preloader
 
-> 治好你的"页面加载焦虑症"——构建时自动注入 `<link rel="prefetch">`，让路由组件在浏览器空闲时静默预取，用户点击立竿见影。
+> 治好你的"页面加载焦虑症"——精确控制指定路由的预加载时机，在用户点击之前静默预取重型页面，让组件切换瞬间响应。
 
 [![npm version](https://img.shields.io/npm/v/vite-plugin-preloader)](https://www.npmjs.com/package/vite-plugin-preloader)
 [![Vite](https://img.shields.io/badge/Vite-5~8-646cff)](https://vitejs.dev)
@@ -11,7 +11,7 @@
 - 📅 打开日历组件，echarts 慢慢加载
 - 💸 用户等不及直接关闭页面
 
-**别再让用户等待了！** 这个插件在构建阶段将路由组件映射到真实 chunk，自动向 HTML 注入浏览器原生 `<link rel="prefetch">` 标签，在用户点击之前悄悄把页面拉到本地缓存。
+**别再让用户等待了！** 这个插件在构建阶段将路由组件映射到真实 chunk，向 HTML 注入 `<link rel="prefetch">` 标签，浏览器空闲时自动拉取目标资源；配合状态 UI 和调试工具，帮你精确控制哪些页面需要提前预取、哪些不需要。
 
 ## ⚡ 效果对比
 
@@ -191,248 +191,5 @@ HTML 处理时（transformIndexHtml hook）：
 - **[升级]** TypeScript 类型定义与实现完全对齐
 
 ### v1.1.x（历史）
-- 初始版本，运行时 `import()` 预加载（生产环境实际无效）
+- 早期版本，使用运行时动态 `import()` 预加载方式，开创了按优先级精细化路由预加载的配置模式
 
-
-> 治好你的"页面加载焦虑症"，一行配置让路由秒开！
-
-你是否经历过这样的痛苦：
-- 📊 点击图表页面，转圈3秒才显示
-- 📅 打开日历组件，echarts 慢慢加载
-- 💸 用户等不及直接关闭页面
-
-**别再让用户等待了！** 这个插件帮你在用户点击之前，悄悄把页面预加载好。
-
-## ⚡ 效果对比
-
-```
-❌ 没有预加载：点击 → 等待 3s → 页面显示
-✅ 使用预加载：点击 → 瞬间显示 🎉
-```
-
-## 🎯 核心特性
-
-- **🛠️ 零侵入** - 不改业务代码，只在 `vite.config.js` 配置
-- **⚡ 真的快** - 构建时生成代码，运行时零开销
-- **🧠 够聪明** - 按优先级预加载，不会卡住首页
-- **🔍 能调试** - 开发环境提供完整的调试工具
-- **📦 很轻量** - 核心代码不到 200 行
-
-## 📦 5秒安装
-
-```bash
-npm i vite-plugin-preloader -D
-```
-
-## 🚀 30秒配置
-
-### 懒人模式（推荐）
-```js
-// vite.config.js
-import preloader from 'vite-plugin-preloader'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    preloader({
-      routes: [
-        '/dashboard',
-        '/charts', 
-        '/calendar'
-      ]
-    })
-  ]
-})
-```
-
-### 精细化配置
-```js
-preloader({
-  routes: [
-    { path: '/dashboard', reason: '主页面，必须快', priority: 1 },
-    { path: '/charts', reason: 'echarts 太重了', priority: 2 },
-    { path: '/calendar', reason: 'fullcalendar 500KB', priority: 3 }
-  ],
-  delay: 1000,
-  debug: true
-})
-```
-
-**就这样！** 不需要改任何业务代码，插件会自动干活：
-
-1. 🕐 页面加载完成 2 秒后开始预加载
-2. 📊 按优先级依次加载组件
-3. 🎨 右下角显示加载进度
-4. ✅ 完成后用户点击秒开
-
-## 💡 实际使用场景
-
-### 真实案例（来自你的项目）
-```js
-preloader({
-  routes: [
-    '/demo/13-calendar',          // 📅 日历组件
-    '/demo/29-antv-x6-editor',    // 🎨 流程图编辑器  
-    '/demo/16-text-editor',       // 📝 富文本编辑器
-    '/demo/33-v-table-gantt',     // 📊 甘特图组件
-    '/demo/20-dragable',          // 🔄 拖拽组件
-    // 后续还觉得哪些页面初次切换等待时间长，添加到预加载里面来耍
-  ]
-})
-```
-
-### 其他常见场景
-```js
-// 你的痛点：图表页面巨慢
-{ 
-  path: '/analytics', 
-  reason: 'echarts + d3.js 组合拳，800KB+',
-  priority: 1  // 优先加载
-}
-```
-
-### 场景2：电商平台
-```js
-// 你的痛点：商品详情页组件多
-{ 
-  path: '/product/:id', 
-  reason: '图片轮播 + 评价组件 + 推荐算法',
-  priority: 2 
-}
-```
-
-### 场景3：文档系统
-```js
-// 你的痛点：Markdown 编辑器启动慢  
-{ 
-  path: '/editor', 
-  reason: 'Monaco Editor + 语法高亮插件',
-  priority: 1 
-}
-```
-
-## 🎨 看得见的效果
-
-控制台会实时显示预加载进度：
-
-```
-🚀 [预加载] 开始预加载 3 个页面
-✅ [预加载] /dashboard (156ms) - 主页面，必须快  
-✅ [预加载] /charts (445ms) - echarts 太重了
-✅ [预加载] /calendar (332ms) - fullcalendar 500KB
-🎉 [预加载] 完成! 总耗时 1.2s，为用户省了 3s 等待
-```
-
-页面右下角显示状态：
-```
-🔄 正在优化页面... 2/3
-```
-
-## 🛠️ 调试神器
-
-开发环境下，按 F12 试试这些命令：
-
-```js
-// 看看预加载了啥
-preloaderDebug.stats()
-// 输出: { completed: 3, failed: 0, preloadedPaths: ['/dashboard', '/charts'] }
-
-// 检查某个页面状态
-preloaderDebug.check('/dashboard')  
-// 输出: true (已预加载)
-
-// 手动重新预加载
-preloaderDebug.restart()
-```
-
-## ⚙️ 完整配置
-
-```js
-preloader({
-  routes: [
-    {
-      path: '/heavy-page',
-      component: '@/views/heavy/index.vue',  // 可选，不填自动推断
-      reason: '这页面有点重，提前加载',      // 可选，但建议写
-      priority: 1                            // 数字越小越先加载
-    }
-  ],
-  delay: 2000,                    // 等主页面稳定后再开始
-  showStatus: true,               // 显示加载状态
-  statusPosition: 'bottom-right', // 状态显示位置
-  debug: true                     // 开发环境显示详细日志
-})
-```
-
-## 🎯 配置说明
-
-| 配置项 | 说明 | 默认值 | 建议 |
-|--------|------|--------|------|
-| `routes` | 要预加载的路由 | `[]` | 选择最重要的 3-5 个页面 |
-| `delay` | 延迟开始时间(ms) | `2000` | 给首页留点时间 |
-| `showStatus` | 是否显示状态 | `true` | 开发时建议打开 |
-| `debug` | 调试模式 | `false` | 开发时建议打开 |
-
-## 💰 投入产出分析
-
-**投入：** 5分钟配置
-**产出：** 
-- ⚡ 页面打开速度提升 50%-80%
-- 😊 用户体验显著改善  
-- 📈 页面跳出率降低
-- 🎯 核心页面访问率提升
-
-## 🚨 注意事项
-
-**什么页面适合预加载？**
-- ✅ 用户经常访问的页面
-- ✅ 包含大型组件库的页面
-- ✅ 首屏之后的核心流程页面
-
-**什么页面不建议预加载？**
-- ❌ 很少访问的管理页面
-- ❌ 需要权限验证的敏感页面  
-- ❌ 包含大量图片/视频的页面
-
-## 🔧 工作原理（技术向）
-
-1. **构建时魔法** - 扫描你的配置，生成预加载代码
-2. **虚拟模块注入** - 创建 `virtual:preloader` 模块自动导入
-3. **智能调度** - 按优先级串行加载，不抢占主线程
-4. **内存缓存** - 组件加载后直接缓存，点击时秒开
-
-## 🤔 常见问题
-
-**Q: 会不会影响首页加载速度？**  
-A: 不会！默认等待 2 秒后才开始，而且是后台异步进行
-
-**Q: 预加载失败怎么办？**  
-A: 不影响正常使用，用户点击时还是会正常加载
-
-**Q: 支持动态路由吗？**  
-A: 支持！比如 `/user/:id` 这样的路由也能预加载
-
-**Q: 打包后代码会变大吗？**  
-A: 几乎不会，生成的运行时代码很小，而且会被 tree-shake
-
-## 🎉 用户反馈
-
-> "我们的 BI 后台原来打开图表页面要 3 秒，现在瞬开！老板都夸我了 😄"  
-> —— 某厂前端开发
-
-> "电商系统的商品页面现在丝滑如德芙，用户留存率提升了 15%"  
-> —— 电商公司 CTO
-
-## 🚀 立即开始
-
-```bash
-npm i vite-plugin-preloader -D
-```
-
-然后在 `vite.config.js` 里加几行配置，让你的应用飞起来！
-
----
-
-**让等待成为过去式，让用户爱上你的应用！** ⚡
-
-*如果这个插件帮到你了，给个 ⭐ 支持一下吧~*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-preloader",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "🚀 Vite plugin for intelligent route preloading - 智能路由预加载插件",
   "main": "dist/index.js",
   "module": "dist/index.mjs",