Next.js Discord

Discord Forum

Extremely slow compilation times when running in development + High memory usage.

Unanswered
Harlequin posted this in #help-forum
Open in Discord
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:

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.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)