{
  "ocm": "1",
  "id": "tencentblueking-bk-bcs-bundle-optimization",
  "kind": "skill",
  "name": "Vite 构建产物体积优化",
  "description": "使用 Rollup Visualizer 分析产物，并通过拆包 (Code Splitting) 和 Tree Shaking 减少首屏体积。",
  "publisher": "TencentBlueKing",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "vite",
      "rollup",
      "performance",
      "optimization",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "使用 Rollup Visualizer 分析产物，并通过拆包 (Code Splitting) 和 Tree Shaking 减少首屏体积。"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/TencentBlueKing/bk-bcs",
      "path": "bcs-services/bcs-project-manager/.cursor/skills/bundle-optimization/SKILL.md",
      "ref": "445c155ee28ee83a707ec81306383e1cc9708dd2",
      "url": "https://github.com/TencentBlueKing/bk-bcs/blob/445c155ee28ee83a707ec81306383e1cc9708dd2/bcs-services/bcs-project-manager/.cursor/skills/bundle-optimization/SKILL.md",
      "key": "TencentBlueKing/bk-bcs/bcs-services/bcs-project-manager/.cursor/skills/bundle-optimization/SKILL.md"
    }
  },
  "instructions": "# Vite 构建产物体积优化\n\n当首屏加载慢 (FCP > 1.5s) 时，通常需要检查 JS Bundle 的体积。\n\n## 1. 产物分析 (Visualizer)\n\n首先\"看见\"哪些包最大。\n\n```bash\nnpm install rollup-plugin-visualizer -D\n```\n\n## 2. 常用优化策略\n\n### 路由懒加载 (Route Lazy Loading)\n**这是收益最大的优化点**。\n\n❌ `import UserList from './views/UserList.vue'`\n✅ `component: () => import('./views/UserList.vue')`\n\n### 依赖分包 (Manual Chunks)\n将大型库（ECharts, bkui-vue）单独打包，避免 vendor hash 频繁变化。\n\n### 按需引入 (Tree Shaking)\n❌ `import _ from 'lodash'`\n✅ `import debounce from 'lodash-es/debounce'`\n\n### Gzip 压缩\n```bash\nnpm install vite-plugin-compression -D\n```\n\n## 3. 完整配置模版\n\n> 📦 获取完整 vite.config.ts 配置：`skil",
  "cost": {
    "context_tokens": 195
  }
}