[英]Loading pages is extremely slow in dev mode in Next.js (30s+), what could be causing this?
问题：
基本上遇到以下问题（但使用不同的文件）： 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 进程插件输出和其他终端输出：
执行 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
我建议将依赖项与 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 放入 transpile 模块中。
对于加载 3rd 方脚本，请尝试使用新的 next11 组件，而不是使用其他库（ https://nextjs.org/docs/basic-features/script ）
除此之外，我建议您可以删除 react-icons 并使用 iconify/eva 进行替换 - 这只是为了减少相同的使用库..
干杯人😊。 尽管如此，优化开发或生产的加载时间和速度仍然很困难。
Next.js - Eslint 不会在开发模式下对任何页面进行 linting（除了 pages/_app.js）
[英]Next.js - Eslint is not linting any pages in dev mode (aside from pages/_app.js)
Next.js 未处理的运行时错误“无法加载脚本：/_next/static/chunks/...”仅在开发模式下触发
[英]Next.js Unhandled Runtime Error "Failed to load script: /_next/static/chunks/..." only triggered in dev mode
尝试将Next.js应用程序部署到以开发人员模式运行的Zeit云时出错
[英]Error when attempting to deploy Next.js app to Zeit cloud, running in dev mode
尝试将 NextAuth.js 提供程序与 Next.js 一起使用时导致此导出错误的原因是什么？
[英]What is causing this export error when trying to use a NextAuth.js Provider with Next.js?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.