为什么Next.js应用运行时webpack会持续重复下载资源？

问题现象 #

开发Next.js应用时出现webpack持续重复下载资源的异常，现象如下：

关联业务代码片段：

function BuyTicket(props: BuyTicketProps) {
  const {
    eventId,
    buyTicketDataBE,
    sortedBookings,
    recommendations,
    sortedEventTimes,
    couponRedeemString,
    translations,
    lang,
  } = props;
  const [buyTicketData, setBuyTicketData] = useState({ ...buyTicketDataBE });
  const router = useRouter();

  useEffect(() => {
    setBuyTicketData({ ...buyTicketDataBE });
  }, [buyTicketDataBE]);

  useEffect(() => {
  // ..
  }, []);
}

已添加多处console.log()调试，无重复调用日志，无法定位根因。

排查与解决步骤 #

• 定位编译触发源
  在next.config.js中添加webpack日志配置，查看每次重复编译的触发原因：

module.exports = {
  webpack: (config, { dev }) => {
    if (dev) {
      // 输出详细编译日志，明确触发重编译的文件路径
      config.infrastructureLogging = {
        level: 'verbose'
      }
    }
    return config
  }
}

重启项目后观察终端输出，每次资源重复下载前终端会打印触发重编译的文件，可直接定位是业务代码变动、依赖文件变动还是系统文件监听异常导致的问题。

• 排查未捕获运行时异常
  打开浏览器控制台的「Preserve log（保留日志）」开关，复现问题时观察是否有未捕获的JS报错。Next.js的Fast Refresh机制遇到未捕获全局异常时会触发全页重载，此时资源会重新拉取，但页面刷新会清空之前的控制台日志，所以会出现console.log无重复输出的现象。

• 检查热更WebSocket连接状态
  打开浏览器网络面板，过滤WS类型请求，查看_next/webpack-hmr的WebSocket连接是否频繁断开重连。如果出现频繁断连，检查本地端口占用、反向代理配置、hosts规则是否拦截了热更请求。

• 临时验证方案

  • 删除项目根目录下的.next缓存文件夹，重启开发服务验证
  • 临时关闭React严格模式，将next.config.js中的reactStrictMode设为false后重启验证
  • 若上述操作无效，删除node_modules、锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）后重新安装依赖启动

内容的提问来源于stack exchange，提问作者János