Next.js 在开发模式下加载页面非常慢（30 秒以上），这可能是什么原因造成的？

Question

问题：

本质上遇到以下问题（但使用不同的文件）：https ://github.com/vercel/next.js/discussions/17977

已经尝试了那里建议的一切。

这是开发模式下页面加载的样子：

有人对如何优化这个有任何建议吗？

---

代码：

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

在执行 npm run dev 之前尝试注释掉 next.config.js 中的所有内容，但没有更改任何内容。

js.config.json

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

包.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"
  }
}

---

捆绑分析：

客户

服务器

---

WebPack 进度插件输出和其他终端输出：

https://pastebin.com/PAfudkdg

---

进行 NPM 安装时出错：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: fintex@0.0.1
npm ERR! Found: react@17.0.2
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 react-tradingview-widget@1.3.2
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.

---

执行 NPM 安装时的终端输出 --FORCE：

npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.2
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 react-tradingview-widget@1.3.2
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: react-dom@17.0.2
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 react-tradingview-widget@1.3.2
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: react@17.0.2
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 simplebar-react@2.3.5
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: react-dom@17.0.2
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 simplebar-react@2.3.5
npm WARN node_modules/simplebar-react
npm WARN   simplebar-react@"^2.3.0" from the root project
npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated react-load-script@0.0.6: 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

我建议将依赖项与 devDependency 分开

像这些包应该在 devDependency 里面

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

我认为你可以删除

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

来自 next.config.js ——但不确定它是否会给你错误，我以前从未将 swr 放入转译模块中。

为了加载第 3 方脚本，请尝试使用新的 next11 组件，而不是使用其他库（https://nextjs.org/docs/basic-features/script）

除此之外，我建议您可以删除react-icons并使用 iconify/eva 进行替换 - 这只是为了减少相同的使用库..

干杯伙计。然而，优化开发或生产的加载时间和速度是很困难的。对于任何改进它的机会永远不能过于谨慎。