nextjs 移动端组件延迟加载 性能优化

需求：Lighthouse 性能评分 出现  “避免 DOM 规模过大 ”

优化：

✅ 减少移动端初始加载体积
✅ 提升首屏加载速度
✅ 保持桌面端的完整体验
✅ 实现平滑的滚动加载效果
✅ 兼容现有的数据获取逻辑

LazyLoader.tsx

'use client';

import { useState, useEffect } from 'react';

export const LazyLoader = ({ children }: { children: React.ReactNode }) => {
  const [isMobile, setIsMobile] = useState(false);
  const [shouldRender, setShouldRender] = useState(false);

  useEffect(() => {
    // 检测移动端
    const checkMobile = () => {
      const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
      setIsMobile(isMobileDevice);
      if (!isMobileDevice) {
        setShouldRender(true); // 桌面端立即加载
      }
    };

    // 滚动处理函数
    const handleScroll = () => {
      const scrollY = window.scrollY || document.documentElement.scrollTop;
      const triggerPoint = window.innerHeight * 0.8;

      if (scrollY > triggerPoint) {
        setShouldRender(true);
        window.removeEventListener('scroll', handleScroll);
      }
    };

    checkMobile();

    if (isMobile) {
      window.addEventListener('scroll', handleScroll);
      return () => window.removeEventListener('scroll', handleScroll);
    }
  }, [isMobile]);

  return <>{shouldRender ? children : null}</>;
};

使用

import { LazyLoader } from '@/components/home/LazyLoader';  
     
 <LazyLoader>
    // 延迟加载代码
   <Suspense fallback={<InfoModuleSkeleton />}>
      <AsyncSportsModules lang={lang} />
   </Suspense>
</LazyLoader>