菜单
Use this skill when the user asks to analyze the bundle size, find large dependencies, optimize the build output, check what's included in the bundle, or reduce the app size. Trigger phrases: "analyze bundle", "bundle size", "large bundle", "reduce bundle size".
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use this skill when the user asks to protect a route, add authentication to a page, restrict access to authenticated users, or work with OIDC/OAuth auth context. Trigger phrases: "protect route", "auth guard", "restricted page", "protected route".
Use this skill when the user asks to create a new page, add a new route, or add a new screen to the application. Trigger phrases: "new page", "new route", "add route".
Use this skill when the user asks to add a GraphQL query, mutation, or subscription, fetch data from the API, or work with GraphQL operations. Trigger phrases: "add graphql query", "add mutation", "add subscription", "graphql codegen".
Use this skill when the user asks to create a new reusable UI component, shared UI element, or design system component. Strictly for shared/ui layer. Trigger phrases: "new component", "new ui component", "create component", "add to shared/ui".
Use this skill when the user asks to create a new FSD slice, add a new feature, entity, widget, or shared module, or when scaffolding any new architectural unit in the project. Trigger phrases: "new feature", "new entity", "new widget", "new fsd slice", "scaffold slice".
Use this skill when the user asks to create a new Zustand store, add global state, add client state management, or create a state slice. Trigger phrases: "new store", "state management", "add state", "zustand store".
| name | analyze-bundle |
| description | Use this skill when the user asks to analyze the bundle size, find large dependencies, optimize the build output, check what's included in the bundle, or reduce the app size. Trigger phrases: "analyze bundle", "bundle size", "large bundle", "reduce bundle size". |
Analyzes the production bundle to identify size issues and optimization opportunities.
ANALYZE=true npm run build:vite
This generates _stats.html in the project root (via rollup-plugin-visualizer). Open it in a browser to see an interactive treemap of the bundle.
Alternatively, build and open directly:
# Linux
npm run build:vite && xdg-open _stats.html
# macOS
npm run build:vite && open _stats.html
Check if the library supports tree-shaking. Import only what you need:
// Bad — imports entire library
import _ from "lodash";
// Good — imports only the function
import debounce from "lodash/debounce";
TanStack Router automatically code-splits routes. Verify your route components are not imported statically elsewhere.
Lucide React supports tree-shaking — import individual icons:
// Good
import { Home, User, Settings } from "lucide-react";
Images and fonts should be in public/ or src/assets/, not imported into JS as data URLs.
For pages with heavy dependencies, ensure they're loaded lazily. TanStack Router does this automatically via file-based routing — each route is a separate chunk.
General targets for a modern SPA:
ANALYZE=true npm run build:vite and open _stats.htmlnpm run knip catches unused packages)update-deps skill (Selective Update) to swap it.refactor-fsd skill.