Next.js传统Pages路由下如何预加载Heavy页面JS资源

针对你用Next.js 13.4.13 Pages目录结构遇到的问题，以下是几种直接可行的调整方案，让heavy页面的资源在用户进入light页面时提前加载：

方案一：用Next.js Router手动触发页面预加载 #

在light页面的组件中，利用next/router的prefetch方法，在页面加载完成后主动预加载heavy页面的所有资源。这种方式会完整预加载heavy页面的JS、CSS等chunk，跳转时直接使用缓存资源。

// pages/light.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';

export default function LightPage() {
  const router = useRouter();

  useEffect(() => {
    // 仅在用户已登录时触发预加载（根据你的登录状态判断逻辑调整）
    if (typeof window !== 'undefined' && isUserLoggedIn()) {
      router.prefetch('/heavy');
    }
  }, []);

  // 假设你的登录状态判断函数
  const isUserLoggedIn = () => {
    return localStorage.getItem('token') !== null;
  };

  return (
    <div>
      {/* 页面表单内容 */}
      <Link href="/heavy">前往Heavy页面</Link>
    </div>
  );
}

方案二：单独预加载Babylon.js依赖 #

因为heavy页面的体积主要来自10MB的Babylon.js，你可以只预加载这个核心依赖，而非整个页面chunk，减少不必要的带宽消耗。

// pages/light.js
import { useEffect } from 'react';
import Link from 'next/link';

export default function LightPage() {
  useEffect(() => {
    if (typeof window !== 'undefined' && isUserLoggedIn()) {
      // 动态import预加载Babylon.js
      import('babylonjs').then(() => {
        console.log('Babylon.js已预加载完成');
      });
    }
  }, []);

  // 登录状态判断函数
  const isUserLoggedIn = () => {
    return localStorage.getItem('token') !== null;
  };

  return (
    <div>
      {/* 页面表单内容 */}
      <Link href="/heavy">前往Heavy页面</Link>
    </div>
  );
}

方案三：优化Next.js Link组件的预加载时机 #

如果导航栏中存在跳转到heavy页面的Link组件，默认情况下next/link会在链接进入视口或鼠标悬停时预加载。你可以通过配置让它在页面加载时立即预加载：

// pages/light.js
import Link from 'next/link';

export default function LightPage() {
  return (
    <div>
      {/* 页面表单内容 */}
      <Link href="/heavy" prefetch={true}>
        前往Heavy页面
      </Link>
    </div>
  );
}

注：这种方式的预加载时机由Next.js控制，若要更精准地在登录后触发，建议结合方案一的登录状态判断。

注意事项 #

• 预加载会消耗额外带宽，务必仅在用户已登录（确定可能访问heavy页面）时触发，避免浪费资源。
• 测试时需清除浏览器缓存，才能看到预加载的实际效果。
• 若Babylon.js存在拆分的子模块，可针对性预加载所需的具体模块，进一步优化加载体积。

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