面试题：Next.js 路由懒加载策略及其优化

Next.js 中路由懒加载机制

在 Next.js 中，路由懒加载是默认开启的。当应用启动时，Next.js 并不会一次性加载所有页面的代码。只有当用户实际导航到某个路由对应的页面时，该页面的代码才会被动态加载。这一机制通过 Webpack 的动态导入（import()）实现。

优化路由懒加载策略提升页面加载速度

动态导入

Next.js 中页面默认就是通过动态导入实现懒加载的。例如，对于一个简单的页面组件：

// pages/about.js
import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  );
};

export default About;

在其他组件中导航到该页面时，Next.js 会在需要时动态导入这个 about.js 文件。

加载优先级

预加载：可以使用 next/link 组件的 prefetch 属性。当设置 prefetch 为 true 时，Next.js 会在用户接近链接时，提前加载对应的页面代码。

import Link from 'next/link';

const MyLink = () => {
  return (
    <Link href="/about" prefetch>
      <a>About Page</a>
    </Link>
  );
};

export default MyLink;

这样，当用户鼠标悬停或者页面滚动接近这个链接时，/about 页面的代码就会被提前加载，加快用户点击链接后的页面显示速度。 2. 动态路由的优先级：如果项目中有动态路由（例如 pages/post/[id].js），可以根据业务需求对不同的动态路由页面设置不同的加载优先级。例如，对于热门文章的页面，可以在服务器端渲染（SSR）或者静态站点生成（SSG）阶段，提前预渲染这些页面并缓存，用户访问时直接从缓存加载，提高加载速度。

// pages/post/[id].js
import React from'react';
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post {id}</h1>
    </div>
  );
};

export default Post;

在服务器端，可以通过 getStaticProps 或者 getServerSideProps 来处理动态路由页面的预渲染和数据获取，优化加载优先级。

// pages/post/[id].js
import React from'react';
import { useRouter } from 'next/router';

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.id); // 模拟获取文章数据
  return {
    props: {
      post
    },
    revalidate: 60 // 每60秒重新验证（用于增量静态再生）
  };
}

export async function getStaticPaths() {
  const posts = await getAllPosts(); // 模拟获取所有文章
  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));
  return { paths, fallback: false };
}

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;

通过以上方式，可以优化路由懒加载策略，提升整体页面加载速度。

星途面试题库

面试题：Next.js 路由懒加载策略及其优化

知识考点

面试题答案

Next.js 中路由懒加载机制

优化路由懒加载策略提升页面加载速度

动态导入

加载优先级