如何在NextJS中调试“[webpack.cache.PackFileCacheStrategy]序列化大字符串”？

Question

我有一个 NextJS 应用程序，它时不时地发出这些警告：

<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (118kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (115kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (116kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (118kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (117kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (119kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (115kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (116kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (118kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (117kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (118kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (115kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (116kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (118kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (117kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (119kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (115kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (116kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
...

我该怎么处理这些？我如何找到问题的根源？或者我应该忽略这些？

Answer 1

有时此错误可能是由于对大字符串进行编码和解码而引起的（因此请确保您没有这样做）。但这通常是 Next.js 的问题。

更新Next.js

升级到 14 后运行版本 13 时，我曾经在 Next 应用程序中遇到此错误，问题已得到解决。

您可以通过运行以下命令来升级 Next.js：

npm i next@latest react@latest react-dom@latest eslint-config-next@latest @types/react

请参阅官方升级指南了解所有重大更改。

使用涡轮包

Turbopack 几乎稳定，并且比 Webpack 性能更高。只需将

--turbo

标志添加到

next start

命令即可：

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

请注意，切换到 Turbpack 会带来一些重大变化。主要是

webpack()

中缺少

next.config.mjs

功能。 在此处查看完整列表。

检查文件系统是否损坏

我已经在 Stack Overflow 上写了一个答案，详细说明了如何使用 Next.js 解决损坏问题。

TLDR：尝试删除缓存文件、关闭文件同步或升级 Next.js 和 Node 安装。