mcpField
B
bundle-barrel-imports

bundle-barrel-imports

github.com/theorcdev开发2.1k44 次安装2 天前更新
代码仓库

关于 bundle-barrel-imports

面向 JavaScript 和 React 开发者的编码技能，介绍如何通过直接导入模块和 Next.js 包导入优化，减少 barrel 文件带来的额外加载。

主要功能

  1. 01说明 barrel 文件的导入开销
  2. 02建议直接导入模块
  3. 03介绍 Next.js 包导入优化
  4. 04列出常见受影响的库

适用场景

  1. 01加快开发启动速度
  2. 02减少冷启动导入开销
  3. 03为组件库选择导入方式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill bundle-barrel-imports

安装后在 Claude Code 中输入/bundle-barrel-imports确认已加载。

详细介绍

避免从 Barrel 文件导入

直接从源文件导入，而不是从 Barrel 文件导入，以避免加载数千个未使用的模块。Barrel 文件是用于重新导出多个模块的入口点（例如，执行 export * from './module' 的 index.js）。

热门图标和组件库的入口文件中可能有多达 10,000 个重新导出项。对于许多 React 包，仅导入它们就需要 200-800ms，影响开发速度和生产环境的冷启动。

为什么 Tree-shaking 无济于事： 当库被标记为外部依赖（不打包）时，打包工具无法对其进行优化。如果将其打包以启用 Tree-shaking，构建速度就会大幅下降，因为需要分析整个模块依赖图。

错误（导入整个库）：

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

正确（仅导入所需内容）：

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

替代方案（Next.js 13.5+）：

// 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

直接导入可使开发启动速度提高 15-70%、构建速度提高 28%、冷启动速度提高 40%，并显著加快 HMR。

常受影响的库：lucide-react、@mui/material、@mui/icons-material、@tabler/icons-react、react-icons、@headlessui/react、@radix-ui/react-*、lodash、ramda、date-fns、rxjs、react-use。

参考：我们如何优化 Next.js 中的包导入

评论

支持 Markdown