mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Delba de OliveiraGitHubLuke Sandberggraphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>JosephRich Hainesvercel[bot] <35613825+vercel[bot]@users.noreply.github.com>This PR adds instructions on how to run and navigate the new turbopack bundle analyzer to the existing [Optimizing package bundling guide ](https://nextjs.org/docs/app/guides/package-bundling). Todo: - [x] Embed video - [x] Add image for import chain --------- Co-authored-by: Luke Sandberg <[email protected]> Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Co-authored-by: Joseph <[email protected]> Co-authored-by: Rich Haines <[email protected]> Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
50 lines
1.4 KiB
Plaintext
50 lines
1.4 KiB
Plaintext
---
|
|
title: optimizePackageImports
|
|
description: API Reference for optimizePackageImports Next.js Config Option
|
|
version: experimental
|
|
---
|
|
|
|
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
|
|
|
|
Some packages can export hundreds or thousands of modules, which can cause performance issues in development and production.
|
|
|
|
Adding a package to `experimental.optimizePackageImports` will only load the modules you are actually using, while still giving you the convenience of writing import statements with many named exports.
|
|
|
|
```js filename="next.config.js"
|
|
module.exports = {
|
|
experimental: {
|
|
optimizePackageImports: ['package-name'],
|
|
},
|
|
}
|
|
```
|
|
|
|
The following libraries are optimized by default:
|
|
|
|
- `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/*`
|