Lazy Loading지연 로딩

<!-- HTML 내장 지연 로딩 (브라우저 네이티브) -->
<img src="photo.webp"
     alt="사진"
     loading="lazy"
     width="400"
     height="300">

<!-- 중요 이미지는 eager -->
<img src="hero.webp" loading="eager" fetchpriority="high">

// 이미지 지연 로딩 유틸리티
function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target as HTMLImageElement;
        img.src = img.dataset.src!;
        img.removeAttribute('data-src');
        observer.unobserve(img);
      }
    });
  }, {
    rootMargin: '50px 0px',  // 50px 전에 미리 로드
  });

  images.forEach(img => observer.observe(img));
}

import { lazy, Suspense } from 'react';

// 동적 임포트로 코드 분할
const HeavyChart = lazy(() => import('./HeavyChart'));
const AdminPanel = lazy(() => import('./AdminPanel'));

function App() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <HeavyChart />
    </Suspense>
  );
}

// Next.js dynamic
import dynamic from 'next/dynamic';

const Map = dynamic(() => import('./Map'), {
  loading: () => <p>지도 로딩 중...</p>,
  ssr: false,  // 서버에서 렌더링 안 함
});

// React Router v6
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Blog = lazy(() => import('./pages/Blog'));

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/blog" element={<Blog />} />
      </Routes>
    </Suspense>
  );
}