面试题：Next.js 中懒加载原理及实现方式

Next.js 中懒加载基本原理

Next.js 中的懒加载基于代码分割技术。代码分割允许将 JavaScript 代码拆分成多个较小的块，只有在需要时才加载这些块。对于组件的懒加载，Next.js 会在页面渲染时不会立即引入该组件的代码，而是等到该组件即将进入视口（对于基于视口的懒加载）或者满足特定条件（如点击等用户操作）时，才异步加载该组件所需的代码，从而减少初始加载时间，提升页面性能。

在 Next.js 项目中实现懒加载的具体方式

组件懒加载
- 动态导入：在 Next.js 中，可以使用动态导入语法（import()）来实现组件的懒加载。例如：

import React from'react';

const MyLazyComponent = React.lazy(() => import('./MyLazyComponent'));

function App() {
    return (
        <React.Suspense fallback={<div>Loading...</div>}>
            <MyLazyComponent />
        </React.Suspense>
    );
}

export default App;

这里 React.lazy 接受一个函数，该函数返回一个动态导入组件的 Promise。React.Suspense 组件用于在组件加载时显示一个加载指示器（fallback 属性指定的内容）。 2. 图片懒加载

Next.js 内置的 <Image> 组件：Next.js 提供了 <Image> 组件，该组件默认支持懒加载。只需使用 <Image> 组件替换原生的 <img> 标签，并设置好 src、width 和 height 等属性即可。例如：

import Image from 'next/image';

function MyPage() {
    return (
        <div>
            <Image
                src="/path/to/image.jpg"
                alt="An example image"
                width={500}
                height={300}
            />
        </div>
    );
}

export default MyPage;

第三方库（如 react - lazyload）：虽然 Next.js 有内置的图片懒加载，但也可以使用第三方库。首先安装 react - lazyload：npm install react - lazyload。然后在组件中使用：

import React from'react';
import LazyLoad from'react - lazyload';

function MyPage() {
    return (
        <LazyLoad>
            <img src="/path/to/image.jpg" alt="An example image" />
        </LazyLoad>
    );
}

export default MyPage;

这种方式对于非 Next.js 内置 <Image> 组件的图片懒加载提供了一种补充方案。

星途面试题库

面试题：Next.js 中懒加载原理及实现方式

知识考点

面试题答案

Next.js 中懒加载基本原理

在 Next.js 项目中实现懒加载的具体方式