面试题：Next.js 动态导入与懒加载在复杂业务场景下的性能调优

Question

在一个复杂的 Next.js 电商应用中，产品详情页面存在多种变体展示（不同颜色、尺寸等），每个变体展示可能需要加载额外的 3D 模型、视频介绍等资源。并且，根据用户的浏览历史和地理位置，页面可能需要加载不同的推荐商品组件。请设计一套基于 Next.js 动态导入与懒加载的解决方案，不仅要保证最佳的加载性能，还要考虑代码的可维护性和扩展性，详细说明实现思路和关键代码片段。

Answer 1

实现思路

1. 变体资源懒加载：使用 Next.js 的动态导入 import() 来懒加载每个变体所需的 3D 模型、视频介绍等资源。这样只有在用户切换到特定变体时才会加载相应资源，避免初始加载过多内容。
2. 推荐商品组件动态加载：根据用户浏览历史和地理位置决定加载不同的推荐商品组件。通过在服务端获取相关信息（可以使用 Next.js 的 getServerSideProps 或 getStaticProps），然后在客户端根据这些信息动态导入对应的推荐组件。
3. 代码组织与可维护性：将变体相关逻辑和推荐组件逻辑分别封装成独立模块，便于管理和扩展。同时，使用 React Hook 来管理组件状态，使代码结构更清晰。

关键代码片段

1. 变体资源懒加载
   • 在产品详情组件中，假设变体数据存储在 variants 数组中，每个变体有一个 loadResources 函数用于加载额外资源。

import React, { useState } from'react';

const ProductDetails = () => {
    const variants = [
        { id: 1, name: 'Red', loadResources: () => import('./RedVariantResources') },
        { id: 2, name: 'Blue', loadResources: () => import('./BlueVariantResources') }
    ];
    const [activeVariant, setActiveVariant] = useState(variants[0]);
    const [variantResources, setVariantResources] = useState(null);

    const handleVariantChange = (variant) => {
        setActiveVariant(variant);
        variant.loadResources().then(res => setVariantResources(res));
    };

    return (
        <div>
            {variants.map(variant => (
                <button key={variant.id} onClick={() => handleVariantChange(variant)}>{variant.name}</button>
            ))}
            {variantResources && <variantResources.Component />}
        </div>
    );
};

export default ProductDetails;

2. 推荐商品组件动态加载
   • 在服务端获取用户相关信息，例如使用 getServerSideProps：

export async function getServerSideProps(context) {
    const { req } = context;
    // 这里模拟获取用户地理位置和浏览历史
    const userLocation = req.headers['x-forwarded-for'] || req.socket.remoteAddress;
    const userHistory = getMockUserHistory();
    return {
        props: {
            userLocation,
            userHistory
        }
    };
}

function getMockUserHistory() {
    return ['product1', 'product2'];
}

- 在客户端根据这些信息动态导入推荐组件：

import React from'react';

const ProductDetails = ({ userLocation, userHistory }) => {
    const RecommendedComponent = React.lazy(() => {
        if (userLocation === '127.0.0.1' && userHistory.includes('product1')) {
            return import('./LocalAndProduct1Recommended');
        } else {
            return import('./DefaultRecommended');
        }
    });

    return (
        <div>
            <React.Suspense fallback={<div>Loading recommended products...</div>}>
                <RecommendedComponent />
            </React.Suspense>
        </div>
    );
};

export default ProductDetails;