Install any skill in seconds. Free to start, no credit card required.
Get Started Free →tencentblueking/Vite 构建产物体积优化
使用 Rollup Visualizer 分析产物,并通过拆包 (Code Splitting) 和 Tree Shaking 减少首屏体积。
Passed 21 of 22 test cases with the skill, and 20 of 22 without it.
1 fixed20 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
During performance triage of a Vite frontend project, at what First Contentful Paint threshold should team members prioritize auditing JS bundle size?
| Checked | Without skill | With skill |
|---|---|---|
| Identifies FCP exceeding 1.5 seconds as the threshold to audit JS bundle size. | Missed | Passed |
The instructions your model reads when the skill loads.
当首屏加载慢 (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
test cases passed, vs 20 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.