前端导入优化技巧Skill bundle-barrel-imports

---

名称: 捆绑桶文件导入优化 描述: 直接从源文件导入而不是桶文件。适用于使用像lucide-react、@mui/material或@radix-ui/react-*等库时，以减少捆绑大小并改善开发启动时间。

避免桶文件导入

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

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

为什么树摇动无效： 当一个库被标记为外部（不捆绑）时，捆绑器无法优化它。如果你捆绑它以实现树摇动，构建会变得显著更慢，因为需要分析整个模块图。

错误（导入整个库）：

import { Check, X, Menu } from 'lucide-react'
// 加载1,583个模块，在开发中额外花费约2.8秒
// 运行时成本：每次冷启动需要200-800毫秒

import { Button, TextField } from '@mui/material'
// 加载2,225个模块，在开发中额外花费约4.2秒

正确（只导入你需要的）：

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'
// 仅加载3个模块（约2KB vs 约1MB）

import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
// 仅加载你使用的部分

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

// next.config.js - 使用optimizePackageImports
module.exports = {
  experimental: {
    optimizePackageImports: ['lucide-react', '@mui/material']
  }
}

// 然后你可以保持便捷的桶导入：
import { Check, X, Menu } from 'lucide-react'
// 在构建时自动转换为直接导入

直接导入提供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。

参考：How we optimized package imports in Next.js（我们如何在Next.js中优化包导入）