Extremely slow compilation times when running in development + High memory usage.
Unanswered
Harlequin posted this in #help-forum
HarlequinOP
I get high memory usage 2-5GB when using either webpack and turbopack. The memory issue is slighty reduced when i disable turbopack and also disable caching, which leads to memory usage being around 2.5GB which is still high and the compilation times becomes like 20s - 60s. Using turbopack leads to around 10-20 seconds for compiling routes on hot reload, which is reasonable, but when i change routes the memory usage skyrockets and it keeps adding up. This leads to an awful development experience because vscode itself takes around 1-2GB, and my backend in python using docker compose consumes memory too but not as bad as Next.js.
My next.config.mjs:
I have also attached my package.json.
additionally, i am also getting this error 404 for enc.js when this file doesn't even exist in my codebase.
My next.config.mjs:
import { withNextVideo } from "next-video/process";
import bundleAnalyzer from "@next/bundle-analyzer";
const withBundleAnalyzer = bundleAnalyzer({
enabled: process.env.ANALYZE === "true",
});
const nextConfig = {
reactStrictMode: false,
webpack: (config, { dev, isServer }) => {
if (dev) {
// Reduce parallel processing during development
config.parallelism = 1;
config.cache = false;
// Reduce chunk sizes
config.optimization.splitChunks = {
chunks: "all",
maxInitialRequests: 3,
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all",
},
},
};
}
return config;
},
experimental: {
turbo: {
// moduleIdStrategy: "deterministic",
},
},
images: {
remotePatterns: [
{
protocol: "https",
hostname: "**",
},
{
protocol: "http",
hostname: "**",
},
],
},
env: {
NEXT_PUBLIC_API_BASE_URL: process.env.NEXT_PUBLIC_API_BASE_URL,
},
};
export default withNextVideo(withBundleAnalyzer(nextConfig));
I have also attached my package.json.
additionally, i am also getting this error 404 for enc.js when this file doesn't even exist in my codebase.
3 Replies
Brown bear
Take a look at the Memory tab in dev tools. Look for unusual stuff, big strings, Error objects etc.
I just spent some debugging something similar. Make sure you're not importing .json files in your components, check if everything is correctly memoized, check for cyclical useEffect/useState
Sadly it's very difficult to give you a more precise advice but that's where I'd start from
I just spent some debugging something similar. Make sure you're not importing .json files in your components, check if everything is correctly memoized, check for cyclical useEffect/useState
Sadly it's very difficult to give you a more precise advice but that's where I'd start from
I.e. I ended up having a client navbar component that was importing a json of all of my files at every render
@Brown bear Take a look at the Memory tab in dev tools. Look for unusual stuff, big strings, Error objects etc.
I just spent some debugging something similar. Make sure you're not importing .json files in your components, check if everything is correctly memoized, check for cyclical useEffect/useState
Sadly it's very difficult to give you a more precise advice but that's where I'd start from
HarlequinOP
I tried that it's always in megabytes. on production too it's extremely quick to load. the memory used is 2.3GB (increasing as we navigate routes)