B
bundle-barrel-imports
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
How to use
- Zainstaluj skill bundle-barrel-imports w swoim projekcie Claude'a, dodając go do katalogu .claude/skills lub konfiguracji agenta.
- Zidentyfikuj biblioteki barrel files w swoim kodzie – szukaj importów takich jak
import { Check, X } from 'lucide-react'lubimport { Button } from '@mui/material'. - Poproś Claude'a o refaktoryzację – opisz problem (wolny dev boot, duży bundle) i wskaż bibliotekę, którą chcesz zoptymalizować.
- Claude zaproponuje zmianę na importy bezpośrednie, np.
import Check from 'lucide-react/dist/esm/icons/check'zamiast importu z barrel file'a. - Jeśli używasz Next.js 13.5+, rozważ alternatywę – dodaj
optimizePackageImportsw next.config.js, aby Claude mógł pozostawić ergonomiczne importy, a build tool automatycznie je zoptymalizuje. - Przetestuj aplikację – sprawdź, czy bundle zmniejszył się, a czas startu dev skrócił się o 15–70%.