Next.js生产环境中Array(n)生成数组长度异常问题求助

问题原因 #

这是Next.js 12.2.0版本配套的Terser压缩工具存在的bug——生产构建压缩代码时，会错误地将new Array(n)或Array(n)这类创建空槽数组的代码转换为Array(n-1)，导致数组长度比预期少1。开发模式未开启代码压缩，因此不会触发该问题。

解决办法 #

1. 升级Next.js版本：将Next.js升级到12.2.3及以上，官方已修复该Terser相关bug，执行对应命令：

   yarn add next@>=12.2.3
   

   或

   npm install next@>=12.2.3
   

2. 替换数组创建方式（临时方案）：若暂时无法升级版本，改用不会触发bug的数组写法，比如：

   • 使用Array.from：Array.from({ length: 3 })
   • 使用fill填充：new Array(3).fill(undefined)
   • 使用展开运算符：[...new Array(3)]

这些方式创建的数组在生产压缩后会保持正确长度，且多数场景下与原空槽数组功能兼容。

内容的提问来源于stack exchange，提问作者lcsth