Menü
使用 Rollup Visualizer 分析产物，并通过拆包 (Code Splitting) 和 Tree Shaking 减少首屏体积。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.
Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.
Archive multiple completed changes at once. Use when archiving several parallel changes.
Continue working on an OpenSpec change by creating the next artifact. Use when the user wants to progress their change, create the next artifact, or continue their workflow.
Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
Fast-forward through OpenSpec artifact creation. Use when the user wants to quickly create all artifacts needed for implementation without stepping through each one individually.
| 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 规则判断是否需要加载