Skills
.Work. You
Rest

bundle-barrel-imports

Community

Shrink bundle size by direct source imports.

Software Engineering#react#tree-shaking#import#bundle-size#direct-imports#frontend-performance
AuthorTheOrcDev
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Barrel files re-export thousands of modules, causing unnecessarily large bundles and slower development. This Skill guides you to import directly from individual source modules to reduce what gets loaded.

Core Features & Use Cases

  • Direct imports: Import only the needed modules from libraries to minimize the number of modules loaded.
  • Tree-shaking friendly: Works with libraries that expose direct esm/dist modules to improve startup times.
  • Use Case: When using lucide-react, @mui/material, or @radix-ui, switch from barrel imports to direct paths to reduce bundle size and improve dev boot time.

Quick Start

Replace barrel imports with direct module imports in your React project. Example: import { Button } from '@mui/material' -> import Button from '@mui/material/Button'

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: bundle-barrel-imports
Download link: https://github.com/TheOrcDev/8bitcn-ui/archive/main.zip#bundle-barrel-imports

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.