面试题：Next.js 中动态导入与懒加载在页面组件中的应用

动态导入与懒加载原理：
- 在 Next.js 中，可以使用动态导入（import()语法）来实现组件的懒加载。这意味着组件代码不会在页面初始加载时就被加载，而是在需要时才加载。
实现步骤：
- 假设页面结构如下：

import React, { useState } from'react';

const Page = () => {
    const [activeModule, setActiveModule] = useState('userInfo');
    const handleModuleChange = (module) => {
        setActiveModule(module);
    };
    return (
        <div>
            <button onClick={() => handleModuleChange('userInfo')}>用户信息</button>
            <button onClick={() => handleModuleChange('orderList')}>订单列表</button>
            {activeModule === 'userInfo' && <UserInfo />}
            {activeModule === 'orderList' && <OrderList />}
        </div>
    );
};

// 动态导入组件
const UserInfo = React.lazy(() => import('./UserInfo'));
const OrderList = React.lazy(() => import('./OrderList'));

export default Page;

在上述代码中：
- 使用React.lazy结合动态导入import()来定义UserInfo和OrderList组件，这两个组件只有在被渲染时才会加载。
- 通过useState来管理当前激活的模块，当用户点击按钮切换模块时，根据activeModule的值来决定渲染哪个组件。
为了处理动态导入组件的加载状态，通常会使用Suspense组件：

import React, { useState, Suspense } from'react';

const Page = () => {
    const [activeModule, setActiveModule] = useState('userInfo');
    const handleModuleChange = (module) => {
        setActiveModule(module);
    };
    return (
        <div>
            <button onClick={() => handleModuleChange('userInfo')}>用户信息</button>
            <button onClick={() => handleModuleChange('orderList')}>订单列表</button>
            <Suspense fallback={<div>加载中...</div>}>
                {activeModule === 'userInfo' && <UserInfo />}
                {activeModule === 'orderList' && <OrderList />}
            </Suspense>
        </div>
    );
};

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

export default Page;

这里Suspense组件的fallback属性用于在组件加载时显示一个加载指示器，提供更好的用户体验。UserInfo和OrderList组件分别放在Suspense组件内部，确保在它们加载完成前显示加载提示。

星途面试题库

面试题：Next.js 中动态导入与懒加载在页面组件中的应用

知识考点

面试题答案