英文:
Nextjs 13 is insanely slow in dev environment
问题
我会非常简洁：
我最近切换到 Nextjs 13，我注意到当我在本地主机上通过 npm run dev 运行我的应用时，速度非常慢。
甚至页面加载需要10秒，有时甚至更长，这怎么可能？
对于所有使用 Nextjs 的人：你知道是否是新版本13的问题吗？你遇到过同样的问题吗？
英文:
I will be very brief:
I recently switched to Nextjs 13 and I noticed it's insanely slow when I run my app on localhost via npm run dev
Pages even take 10 seconds and sometimes even longer to load, how it is possible?
To all who use Nextjs: do you know if it's a problem of the new version 13? did you encounter the same problem?
答案1
得分: 2
我在一个大型项目中遇到了类似的问题，对于这个特定问题，使用 swc 似乎减少了首次访问路由时的编译时间：
const nextConfig = {
// ...
swcMinify: true,
//...
}
关于这个问题，GitHub 上正在进行讨论，有人建议了适用于他们特定问题的方法。你可以在GitHub上的这个问题上了解更多信息。
英文:
I had a similar issue on a big project, and for that particular issue using swc seems to have reduced the compile time for the first time a route is accessed:
const nextConfig = {
// ...
swcMinify: true,
//...
}
There is an ongoing issue on GitHub about it, people are suggesting what have work for their particular issue.
答案2
得分: 2
以下是已翻译好的内容：
可以执行以下操作以加快 Next.js 13+ 开发服务器的开发环境速度。
在 next.config.js 文件中添加以下内容。
module.exports = {
fastRefresh: true,
};
如果上述方法无效，可以在 next.config.js 中添加以下内容。
module.exports = {
concurrentFeatures: true,
};
优化构建配置：确保您的构建配置经过优化以用于开发。例如，您可以禁用某些优化，如缩小和源映射，以提高开发期间的构建速度。请查看您的 next.config.js 文件并进行相应的调整。
以下是在 next.config.js 中的示例：
module.exports = {
productionBrowserSourceMaps: false, // 在开发中禁用源映射
optimizeFonts: false, // 禁用字体优化
minify: false, // 禁用缩小
};
英文:
You can do the following things to speedup dev environment of Next.js 13+ development server.
Add the following item in next.config.js file.
module.exports = {
fastRefresh: true,
};
You can add the following if above thing did not work in next.config.js.
module.exports = {
concurrentFeatures: true,
};
Optimize the build configuration: Ensure that your build configuration is optimized for development. For example, you can disable certain optimizations like minification and source-maps to improve build speed during development. Review your next.config.js file and make appropriate adjustments.
Example is here in next.config.js:
module.exports = {
productionBrowserSourceMaps: false, // Disable source maps in development
optimizeFonts: false, // Disable font optimization
minify: false, // Disable minification
};
答案3
得分: 0
使用scss将加载时间减少了2/3，我们只在“global”css中使用了它，用于一些变量，并从外部库加载这些变量。将其转换为纯CSS效果很好。请注意，我们还在使用tailwindcss。
英文:
One thing I found that cut our load time by 2/3 was using scss. We were using it in our global css for just a couple variables, and loading those variables from an external library.
Turning this into vanilla CSS worked great. Note we're also using tailwindcss.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论