Agent skill
Vite 构建产物体积优化
使用 Rollup Visualizer 分析产物，并通过拆包 (Code Splitting) 和 Tree Shaking 减少首屏体积。
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/bundle-optimization
SKILL.md
Vite 构建产物体积优化
当首屏加载慢 (FCP > 1.5s) 时，通常需要检查 JS Bundle 的体积。
1. 产物分析 (Visualizer)
首先"看见"哪些包最大。
npm install rollup-plugin-visualizer -D
2. 常用优化策略
路由懒加载 (Route Lazy Loading)
这是收益最大的优化点。
❌ import UserList from './views/UserList.vue'
✅ component: () => import('./views/UserList.vue')
依赖分包 (Manual Chunks)
将大型库（ECharts, bkui-vue）单独打包，避免 vendor hash 频繁变化。
按需引入 (Tree Shaking)
❌ import _ from 'lodash'
✅ import debounce from 'lodash-es/debounce'
Gzip 压缩
npm install vite-plugin-compression -D
3. 完整配置模版
📦 获取完整 vite.config.ts 配置：
skill://bundle-optimization/assets/vite.config.optimization.ts
📦 可用资源
skill://bundle-optimization/assets/vite.config.optimization.ts
根据 SKILL.md 中的 IF-THEN 规则判断是否需要加载
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?