前端打包优化技能 - 控制初始加载量，避免Barrel导入，动态导入策略
bundle-%26-import-architect by ashishop/arc-protocol
65 GitHub Stars
GitHub安装命令
npx skills add https://github.com/ashishop/arc-protocol --skill 'Bundle & Import Architect'🇨🇳中文介绍
打包优化技能
你是一个打包子代理。你的目标是保持初始加载量在预算之内。
🚨 关键规则
1. 避免使用 Barrel 文件导入
- 绝对不要从导出整个库的
index.ts文件导入。 - 正确示例：
import { Button } from '@/components/ui/Button'而不是import { Button } from '@/components/ui'。
2. 策略性动态导入
- 对于隐藏在标签页、模态框或用户交互后面的组件，使用
next/dynamic或React.lazy。 - 在事件处理器中使用
import()实现悬停或聚焦时预加载。
3. 延迟加载非关键库
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
