在 Next.js (30s+) 的开发模式下加载页面非常慢，这可能是啥原因造成的？
Posted
技术标签:
【中文标题】在 Next.js (30s+) 的开发模式下加载页面非常慢，这可能是啥原因造成的？【英文标题】：Loading pages is extremely slow in dev mode in Next.js (30s+), what could be causing this?在 Next.js (30s+) 的开发模式下加载页面非常慢，这可能是什么原因造成的？ 【发布时间】：2021-09-29 23:23:43 【问题描述】：问题：
本质上遇到以下问题（但文件不同）：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"
]
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"
捆绑分析：
客户
服务器
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
【问题讨论】：
rm -rf .next node_modules package-lock.json 然后npm install 有帮助吗？有时可能只是因为缓存不好
我刚刚又试了一次。不幸的是，它没有改变任何东西：/ 我确实必须做 npm i --legacy-peer-deps 而不是 npm i，但这会产生什么影响吗？ （我想不是基于我读到的，但永远不能 100% 确定）
有趣，也许用npm install --force 代替npm i --legacy-peer-deps？
看起来 react-tradingview-widget 的反应依赖不匹配。安装其他依赖后可以单独安装试试吗？
@Joshua 使用 console.time('s-s-r')（在 getStaticProps 开始时）和 console.timeEnd('s-s-r')（在 getStaticProps 结束时）检查 getStaticProps 运行需要多长时间（包括 axios 请求）。获得的时间只是页面加载所需的 30 多秒的一小部分，因此问题可能不存在。 （刚刚再次尝试：得到 s-s-r：1.984s）（getStaticProps 之前是 getServerProps，因此为什么在 console.time 中使用“s-s-r”）
【参考方案1】：
我建议将依赖项与 devDependencies 分开
像这些包应该在 devDependencies 中
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 进行替换 - 这只是为了减少相同的使用库..
干杯人?。然而，为开发或生产优化加载时间和速度是一件很困难的事情。永远不要对任何改进它的机会过于谨慎。
【讨论】：
以上是关于在 Next.js (30s+) 的开发模式下加载页面非常慢，这可能是啥原因造成的？的主要内容，如果未能解决你的问题，请参考以下文章
Next.Js 图像组件不会在 localhost 上加载图像
Taiwlind CSS：样式在生产中不加载，在开发中工作。将 Next.js 与 MDX 一起使用
Next.js：在 getInitialProps() 中获取数据之前加载的页面