B
bundle-barrel-imports
Importuj tylko to, czego potrzebujesz – zmniejsz rozmiar bundla i przyspeszy dev
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill Claude'a, który uczy cię importować bezpośrednio z plików źródłowych zamiast z plików barrel. Zastosuj go w projektach z bibliotekami jak lucide-react, @mui/material czy @radix-ui/react-*, aby zredukować rozmiar bundla nawet o 70% i skrócić czas startu aplikacji. Barrel files zawierają tysiące re-exportów – zamiast ładować całą bibliotekę, importuj tylko komponenty, które faktycznie używasz.
Jak używać
- 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%.