-
Notifications
You must be signed in to change notification settings - Fork 27k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add documentation on debugging memory usage #63689
Merged
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
89 changes: 89 additions & 0 deletions
89
docs/02-app/01-building-your-application/06-optimizing/13-memory-usage.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
--- | ||
title: Memory Usage | ||
description: Optimize memory used by your application in development and production. | ||
--- | ||
|
||
As applications grow and become more feature rich, they can demand more resources when developing locally or creating production builds. | ||
|
||
Let's explore some strategies and techniques to optimize memory and address common memory issues in Next.js. | ||
|
||
## Reduce number of dependencies | ||
|
||
Applications with a large amount of dependencies will use more memory. | ||
|
||
The [Bundle Analyzer](/docs/app/building-your-application/optimizing/bundle-analyzer) can help you investigate large dependencies in your application that may be able to be removed to improve performance and memory usage. | ||
|
||
## Record a heap profile | ||
|
||
To look for memory issues, you can record a heap profile from Node.js and load it in Chrome DevTools to identify potential sources of memory leaks. | ||
|
||
In your terminal, pass the `--heap-prof` flag to Node.js when starting your Next.js build: | ||
|
||
```sh | ||
node --heap-prof next build | ||
``` | ||
|
||
At the end of the build, a `.heapprofile` file will be created by Node.js. | ||
|
||
In Chrome DevTools, you can open the Memory tab and click on the "Load Profile" button to visualize the file. | ||
|
||
## Analyze a snapshot of the heap | ||
|
||
You can use an inspector tool to analyze the memory usage of the application. | ||
|
||
When running the `next build` or `next dev` command, add `NODE_OPTIONS=--inspect` to the beginning of the command. This will expose the inspector agent on the default port. | ||
If you wish to break before any user code starts, you can pass `--inspect-brk` instead. | ||
|
||
Now, you can use a tool such as Chrome DevTools to connect to the debugging port to record and analyze a snapshot of the heap to see what memory is being retained. | ||
|
||
See [how to recored and analyze heap snapshots](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots) for more information. | ||
|
||
## Webpack build worker | ||
|
||
The Webpack build worker allows you to run Webpack compilations inside a separate Node.js worker which will decrease memory usage of your application during builds. | ||
|
||
This option is enabled by default if your application does not have a custom Webpack configuration starting in `v14.1.0`. | ||
|
||
If you are using an older version of Next.js or you have a custom Webpack configuration, you can enable this option by setting `experimental.webpackBuildWorker: true` inside your `next.config.js`. | ||
|
||
> **Good to know**: This feature may not be compatible with all custom Webpack plugins. | ||
|
||
## Disable Webpack cache | ||
|
||
The [Webpack cache](https://webpack.js.org/configuration/cache/) saves generated Webpack modules in memory and/or to disk to improve the speed of builds. This can | ||
help with performance, but it will also increase the memory usage of your application to store the cached data. | ||
|
||
You can disable this behavior by adding a [custom Webpack configuration](/docs/app/api-reference/next-config-js/webpack) to your application: | ||
|
||
```js filename="next.config.mjs" | ||
/** @type {import('next').NextConfig} */ | ||
const nextConfig = { | ||
webpack: ( | ||
config, | ||
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } | ||
) => { | ||
if (cfg.cache && !dev) { | ||
cfg.cache = Object.freeze({ | ||
type: 'memory', | ||
}) | ||
cfg.cache.maxMemoryGenerations = 0 | ||
} | ||
// Important: return the modified config | ||
return config | ||
}, | ||
} | ||
|
||
export default nextConfig | ||
``` | ||
|
||
## Disable source maps | ||
|
||
Generating source maps consumes extra memory during the build process. | ||
|
||
You can disable source map generation by adding `productionBrowserSourceMaps: false` and `experimental.serverSourceMaps: false` to your Next.js configuration. | ||
|
||
> **Good to know**: Some plugins may turn on source maps and may require custom configuration to disable. | ||
|
||
## Edge memory issues | ||
|
||
Next.js `v14.1.3` fixed a memory issue when using the Edge runtime. Please update to this version (or later) to see if it addresses your issue. |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are you sure this is the right command? It's expecting a file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this should be
node --heap-prof ./node_modules/.bin/next build
depending on the package manager.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch, thank you. I sent #63982 to update