mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-13 16:35:44 +01:00
Kaj Kowalski
cd05fc8648
- Fix syntax errors in skills markdown files (.github/skills, .opencode/skills) - Change typescript to tsx for code blocks with JSX - Replace ellipsis (...) in array examples with valid syntax - Separate CSS from TypeScript into distinct code blocks - Convert JavaScript object examples to valid JSON in docs - Fix enum definitions with proper comma separation
60 lines
2.3 KiB
Markdown
60 lines
2.3 KiB
Markdown
---
|
|
title: Avoid Barrel File Imports
|
|
impact: CRITICAL
|
|
impactDescription: 200-800ms import cost, slow builds
|
|
tags: bundle, imports, tree-shaking, barrel-files, performance
|
|
---
|
|
|
|
## Avoid Barrel File Imports
|
|
|
|
Import directly from source files instead of barrel files to avoid loading thousands of unused modules. **Barrel files** are entry points that re-export multiple modules (e.g., `index.js` that does `export * from './module'`).
|
|
|
|
Popular icon and component libraries can have **up to 10,000 re-exports** in their entry file. For many React packages, **it takes 200-800ms just to import them**, affecting both development speed and production cold starts.
|
|
|
|
**Why tree-shaking doesn't help:** When a library is marked as external (not bundled), the bundler can't optimize it. If you bundle it to enable tree-shaking, builds become substantially slower analyzing the entire module graph.
|
|
|
|
**Incorrect (imports entire library):**
|
|
|
|
```tsx
|
|
import { Check, X, Menu } from "lucide-react";
|
|
// Loads 1,583 modules, takes ~2.8s extra in dev
|
|
// Runtime cost: 200-800ms on every cold start
|
|
|
|
import { Button, TextField } from "@mui/material";
|
|
// Loads 2,225 modules, takes ~4.2s extra in dev
|
|
```
|
|
|
|
**Correct (imports only what you need):**
|
|
|
|
```tsx
|
|
import Check from "lucide-react/dist/esm/icons/check";
|
|
import X from "lucide-react/dist/esm/icons/x";
|
|
import Menu from "lucide-react/dist/esm/icons/menu";
|
|
// Loads only 3 modules (~2KB vs ~1MB)
|
|
|
|
import Button from "@mui/material/Button";
|
|
import TextField from "@mui/material/TextField";
|
|
// Loads only what you use
|
|
```
|
|
|
|
**Alternative (Next.js 13.5+):**
|
|
|
|
```js
|
|
// next.config.js - use optimizePackageImports
|
|
module.exports = {
|
|
experimental: {
|
|
optimizePackageImports: ["lucide-react", "@mui/material"],
|
|
},
|
|
};
|
|
|
|
// Then you can keep the ergonomic barrel imports:
|
|
import { Check, X, Menu } from "lucide-react";
|
|
// Automatically transformed to direct imports at build time
|
|
```
|
|
|
|
Direct imports provide 15-70% faster dev boot, 28% faster builds, 40% faster cold starts, and significantly faster HMR.
|
|
|
|
Libraries commonly affected: `lucide-react`, `@mui/material`, `@mui/icons-material`, `@tabler/icons-react`, `react-icons`, `@headlessui/react`, `@radix-ui/react-*`, `lodash`, `ramda`, `date-fns`, `rxjs`, `react-use`.
|
|
|
|
Reference: [How we optimized package imports in Next.js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)
|