如何修复Next.js 13.4应用中的link preload警告？

警告内容 #

The resource was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

翻译：

资源已通过link preload预加载，但在window的load事件后的几秒内未被使用。请确保它有合适的as值且是有意预加载的。

解决步骤 #

• 调整Next.js自动预加载策略
  Next.js 13.4的App Router默认会自动预加载路由和资源，可通过next.config.js修改配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      // 降低预加载优先级
      prefetchPriority: 'low',
      // 或完全禁用自动路由预加载
      // prefetchRoutes: false,
    },
  };
  
  module.exports = nextConfig;
  

• 检查自定义preload标签
  排查项目中手动添加的<link rel="preload">标签，确认as属性与资源类型匹配（如脚本用as="script"、样式用as="style"、字体用as="font"），移除不必要的预加载标签。

• 优化动态导入组件
  若动态导入组件引发问题，调整导入参数确保资源被正确使用：

  import dynamic from 'next/dynamic';
  
  const DynamicComponent = dynamic(() => import('../components/MyComponent'), {
    loading: () => <p>Loading...</p>,
    // 按需加载避免无效预加载
    ssr: false,
  });
  

• 排查第三方依赖
  部分第三方库会自动添加预加载资源，查阅依赖文档，寻找禁用不必要预加载的选项，或通过Next.js的transpilePackages配置优化依赖加载。

• 用Bundle Analyzer定位问题资源
  安装依赖并生成资源分析报告：

  npm install @next/bundle-analyzer --save-dev
  

  修改next.config.js：

  const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  });
  
  module.exports = withBundleAnalyzer(nextConfig);
  

  运行ANALYZE=true npm run build查看报告，定位未被使用的预加载资源。

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