メニュー
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/TencentBlueKing/bk-bcs --skill viteコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| id | eng-bundle-opt |
| name | Vite 构建产物体积优化 |
| category | engineering |
| description | 使用 Rollup Visualizer 分析产物，并通过拆包 (Code Splitting) 和 Tree Shaking 减少首屏体积。 |
| tags | ["vite","rollup","performance","optimization"] |
| updated_at | 2026-01-09T00:00:00.000Z |
当首屏加载慢 (FCP > 1.5s) 时，通常需要检查 JS Bundle 的体积。
首先"看见"哪些包最大。
npm install rollup-plugin-visualizer -D
这是收益最大的优化点。
❌ import UserList from './views/UserList.vue'
✅ component: () => import('./views/UserList.vue')
将大型库（ECharts, bkui-vue）单独打包，避免 vendor hash 频繁变化。
❌ import _ from 'lodash'
✅ import debounce from 'lodash-es/debounce'
npm install vite-plugin-compression -D
📦 获取完整 vite.config.ts 配置：
skill://bundle-optimization/assets/vite.config.optimization.ts
skill://bundle-optimization/assets/vite.config.optimization.ts根据 SKILL.md 中的 IF-THEN 规则判断是否需要加载