sinohqb 8dafa5bc52 Add archives, import dev-pipeline skill, and complete Hermes Agent spec

- Add archives/ directory for immutable external skill snapshots
  - Strict immutability rule: only README/CHANGELOG can be modified
  - First import: dev-pipeline-universal v1.0.0 (Hermes Agent)
- Import dev-pipeline-universal into hermes-agent/skills/ with CHANGELOG
- Update hermes-agent/publish/registry.json with imported skill
- Rewrite meta-skills/create-hermes-agent-skill/ with full spec:
  - SKILL.md frontmatter fields and validator constraints
  - Recommended body structure (Overview → When to Use → Pitfalls → Verification)
  - Progressive disclosure (3-level loading)
  - 8 writing quality principles
  - Official reference skills from GitHub repo
  - Tool chain docs (skill_manage, /learn, skill_view)
- Update README.md with archives/ in directory structure

2026-07-02 00:46:13 +08:00

3.0 KiB

Raw Permalink Blame History

前端构建优化（Vite 代码分割 + 路由懒加载）

适用于 Vue 3 + Vite 项目，Element Plus + ECharts 技术栈

问题

Vue 3 + Element Plus + ECharts 项目构建后，默认所有代码打包成一个 JS 文件（通常 2~3MB），首屏加载全量代码，严重影响首次加载速度。

优化方案

1. Vite `manualChunks` 拆包

在 vite.config.js 中配置 build.rollupOptions.output.manualChunks，将大体积第三方库拆为独立 chunk：

// vite.config.js
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // echarts 单独拆包（~1MB，仅访问图表页面时加载）
          if (id.includes('node_modules/echarts')) {
            return 'echarts'
          }
          // element-plus 单独拆包（~1MB，浏览器缓存）
          if (id.includes('node_modules/element-plus')) {
            return 'element-plus'
          }
          // vue 核心库单独拆包（~120KB）
          if (id.includes('node_modules/vue') || id.includes('node_modules/@vue')) {
            return 'vue-core'
          }
        },
      },
    },
    chunkSizeWarningLimit: 500, // 提高告警阈值，避免拆包后仍有大 chunk 告警
  },
})

效果：

Chunk	大小	加载时机
`vue-core`	~120KB	首屏
`element-plus`	~1MB	首屏（浏览器缓存后不重复下载）
`echarts`	~1MB	仅访问图表页面时按需加载
各页面组件	2~15KB	按需加载

2. 路由懒加载（动态 import）

将 router/index.js 中的静态 import 改为动态 () => import(...)：

// ❌ 静态 import（全量加载）
import Dashboard from '../views/dashboard/Index.vue'

// ✅ 动态 import（按需加载）
const routes = [
  {
    path: '/dashboard',
    component: () => import('../views/dashboard/Index.vue'),
  },
]

Vite 会自动为每个动态 import 生成独立 chunk，文件名基于组件名（如 Index-abc123.js）。

3. 验证优化效果

# 构建前
ls -lh dist/assets/
# 输出：index-DoEo0YCm.js  2.3M  ← 单文件

# 配置后构建
npm run build
ls -lh dist/assets/
# 输出：
# vue-core-BuIKajZo.js      119KB
# element-plus-C03w9GoR.js  1.0MB
# echarts-Bb6yjXMn.js       1.0MB
# Index-xxx.js               2~15KB（每个页面）
# ...

注意事项

manualChunks 函数接收的是模块 ID（绝对路径），用 id.includes() 匹配 node_modules 中的包名
路由懒加载只在用户访问对应路由时才加载 chunk，首次访问某页面会有短暂加载延迟（通常 < 200ms）
echarts 拆包后，只有访问包含 ECharts 图表的页面（仪表盘、经营数据等）才会加载 echarts chunk
chunkSizeWarningLimit 建议设为 500KB，避免拆包后 element-plus/echarts 仍触发告警（它们确实很大）
浏览器缓存：element-plus 和 vue-core 拆为独立 chunk 后，只要版本不变，浏览器会缓存，后续页面访问不再下载

3.0 KiB Raw Permalink Blame History Unescape Escape