Loading pages is extremely slow in dev mode in Next.js (30s+), what could be causing this?

Question

QUESTION:

Running into the following issue essentially (but with different files) : https://github.com/vercel/next.js/discussions/17977

Tried everything suggested there already.

Here is what a page load looks like in dev mode:

Would anyone have any suggestions on how to optimise this?

---

CODE:

next.config.js:

const withPlugins = require('next-compose-plugins');
const webpack = require("webpack")
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
})
const withTM = require('next-transpile-modules')(['swr']);

nextConfig = {
    images: {
        domains: ['storage.googleapis.com'],
    },
    webpack: config => {
        config.resolve.extensions = [ '.mjs', '.js', '.jsx', '.json' ];
        config.plugins.push(
            new webpack.ProgressPlugin((percentage, message, ...args) => {
                // e.g. Output each progress message directly to the console:
                console.info(percentage, message, ...args);
            })
        );
        return config
    }
}

module.exports = withPlugins([
    withBundleAnalyzer,
    withTM
], nextConfig);

Tried commenting out everything in next.config.js before doing npm run dev but did not change anything.

js.config.json

{
  "compilerOptions": {
    "baseUrl": "."
  },
  "exclude": [
    "/node_modules"
  ]
}

package.json

{
  "name": "...",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3222",
    "build": "next build",
    "start": "next start",
    "analyze": "cross-env ANALYZE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
  },
  "dependencies": {
    "@emotion/cache": "^11.4.0",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@iconify/icons-ant-design": "^1.1.0",
    "@iconify/icons-eva": "^1.1.0",
    "@iconify/icons-ic": "^1.1.3",
    "@iconify/react": "^1.1.4",
    "@material-ui/core": "^5.0.0-alpha.34",
    "@material-ui/icons": "^5.0.0-alpha.34",
    "@material-ui/lab": "^5.0.0-alpha.34",
    "@material-ui/styles": "^5.0.0-alpha.33",
    "@next/bundle-analyzer": "^11.0.1",
    "@sendgrid/mail": "^7.4.5",
    "apexcharts": "^3.27.1",
    "axios": "^0.21.1",
    "change-case": "^4.1.2",
    "cross-env": "^7.0.3",
    "date-fns": "^2.21.1",
    "emoji-mart": "^3.0.1",
    "firebase-admin": "^9.9.0",
    "framer-motion": "^4.1.17",
    "lodash": "^4.17.21",
    "millify": "^4.0.0",
    "next": "^11.0.1",
    "next-compose-plugins": "^2.2.1",
    "next-transpile-modules": "^8.0.0",
    "nprogress": "^0.2.0",
    "numeral": "^2.0.6",
    "prop-types": "^15.7.2",
    "react": "17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-dom": "17.0.2",
    "react-icons": "^4.2.0",
    "react-load-script": "^0.0.6",
    "react-scroll": "^1.8.2",
    "react-tradingview-widget": "^1.3.2",
    "sanitize-html": "^2.4.0",
    "sass": "^1.35.2",
    "simplebar": "^5.3.0",
    "simplebar-react": "^2.3.0",
    "swr": "^0.5.6"
  }
}

---

BUNDLE ANALYSIS:

Client

Server

---

WEBPACK PROGRESS PLUGIN OUTPUT AND OTHER TERMINAL OUTPUT:

https://pastebin.com/PAfudkdg

---

ERROR WHEN DOING NPM INSTALL:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from [email protected]
npm ERR! node_modules/react-tradingview-widget
npm ERR!   react-tradingview-widget@"^1.3.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

---

TERMINAL OUTPUT WHEN DOING NPM INSTALL --FORCE:

npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"17.0.2" from the root project
npm WARN   14 more (@emotion/react, @emotion/styled, @material-ui/core, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.0.0" from [email protected]
npm WARN node_modules/react-tradingview-widget
npm WARN   react-tradingview-widget@"^1.3.2" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN   react-dom@"17.0.2" from the root project
npm WARN   5 more (@material-ui/core, @material-ui/lab, framer-motion, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.0.0" from [email protected]
npm WARN node_modules/react-tradingview-widget
npm WARN   react-tradingview-widget@"^1.3.2" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"17.0.2" from the root project
npm WARN   14 more (@emotion/react, @emotion/styled, @material-ui/core, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from [email protected]
npm WARN node_modules/simplebar-react
npm WARN   simplebar-react@"^2.3.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN   react-dom@"17.0.2" from the root project
npm WARN   5 more (@material-ui/core, @material-ui/lab, framer-motion, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from [email protected]
npm WARN node_modules/simplebar-react
npm WARN   simplebar-react@"^2.3.0" from the root project
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: abandoned and unmaintained

added 621 packages, and audited 622 packages in 55s

73 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Answer 1

I would recommend to separate the dependencies with devDependencies

like these packages are should be inside devDependencies

prop-types @next/bundle-analyzer cross-env next-compose-plugins next-transpile-modules

and I think you can remove

const withTM = require('next-transpile-modules')(['swr']);

from the next.config.js -- but not sure it will give you errors or not, I have never put swr into transpile modules before.

and for loading 3rd parties script, try using the new next11 component, rather than using other libraries (https://nextjs.org/docs/basic-features/script)

other that that, I would recommend that you can remove react-icons and use the iconify/eva for the replacement - It is just to reduce same usage library..

Cheers man 😊. It is a hard to optimize loading time and speed for dev or production nevertheless.. can't never be too cautious for any opportunities to improve it.