面试题：Next.js中如何实现页面路由的懒加载与代码分割

基本原理

路由懒加载：在 Next.js 中，路由懒加载是基于动态导入（Dynamic Imports）的概念。当一个页面路由被定义时，相关的页面组件代码并不会在应用启动时就全部加载进来，而是在用户实际需要访问该页面时，才会动态地加载对应的代码。这大大减少了初始加载的代码量，提高了应用的加载速度。
代码分割：代码分割是将 JavaScript 代码分割成较小的块，按需加载。Next.js 利用 Webpack 的代码分割功能，自动将页面组件及其依赖的模块分割成单独的文件。当用户访问某个页面时，只加载该页面所需的代码块，避免一次性加载整个应用的所有代码。

具体方式

默认路由懒加载与代码分割：在 Next.js 项目中，只要按照常规方式创建页面文件（在 pages 目录下创建 .js、.jsx、.ts 或 .tsx 文件），Next.js 会自动为每个页面实现路由懒加载和代码分割。例如，在 pages/about.js 中创建一个关于页面：

import React from 'react';

const AboutPage = () => {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
};

export default AboutPage;

当应用启动时，about.js 的代码不会被立即加载，只有当用户访问 /about 路由时，该页面的代码才会被动态加载。 2. 动态路由的懒加载与代码分割：对于动态路由，比如博客文章详情页，假设在 pages/post/[id].js 中定义：

import React from'react';
import { useRouter } from 'next/router';

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

  return (
    <div>
      <h1>Post {id}</h1>
      <p>This is the content of post {id}.</p>
    </div>
  );
};

export default PostPage;

同样，这个动态路由页面的代码也是懒加载的，只有当用户访问如 /post/123 这样具体的文章路由时，[id].js 的代码才会被加载。

手动代码分割（使用 dynamic 函数）：除了自动的代码分割，Next.js 还提供了 next/dynamic 函数，用于更精细地控制代码分割。例如，加载一个较大的组件，并且希望在特定条件下才加载：

import dynamic from 'next/dynamic';

// 懒加载组件，并且不显示加载指示器
const BigComponent = dynamic(() => import('../components/BigComponent'));

const HomePage = () => {
  const [showComponent, setShowComponent] = React.useState(false);

  return (
    <div>
      <h1>Home Page</h1>
      {showComponent && <BigComponent />}
      <button onClick={() => setShowComponent(!showComponent)}>
        {showComponent? 'Hide Component' : 'Show Component'}
      </button>
    </div>
  );
};

export default HomePage;

在这个例子中，BigComponent 只有在用户点击按钮显示它时才会被加载，实现了更灵活的代码分割和懒加载。

面试题：Next.js中如何实现页面路由的懒加载与代码分割

知识考点

面试题答案

基本原理

具体方式