Capítulo 408 de 456

optimizePackageImports

Core Idea

Experimental option that loads only the modules actually used from a package that exports hundreds/thousands of modules, while keeping named-import ergonomics, improving dev/build performance.

Key Concepts

  • experimental.optimizePackageImports: array of package names to optimize; adding a package here avoids loading its entire module tree.
  • Default-optimized libraries: a fixed list already optimized automatically without config.

Code Examples

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
}
  • O que demonstra: adiciona um pacote extra à otimização de imports.

Reference Tables

Otimizados por padrão: lucide-react, date-fns, lodash-es, ramda, antd, react-bootstrap, ahooks, @ant-design/icons, @headlessui/react, @headlessui-float/react, @heroicons/react/20/solid, @heroicons/react/24/solid, @heroicons/react/24/outline, @visx/visx, @tremor/react, rxjs, @mui/material, @mui/icons-material, recharts, react-use, @material-ui/core, @material-ui/icons, @tabler/icons-react, mui-core, react-icons/*, effect, @effect/*.

Anti-patterns

  • Usar em produção sem testar: é experimental e sujeito a mudanças, a doc recomenda não usar em produção sem validar.

Key Takeaways

  1. Só precisa configurar manualmente pacotes fora da lista default (ex: lucide-react já vem otimizado).
  2. Resolve o problema clássico de "import { Icon } from 'huge-icon-lib'" puxando a lib inteira em dev.

Connects To

  • output: outra config de performance/build em next.config.js.
AnterioronDemandEntriesPróximooutput