[Swiper] Lazy / Virtual 비교

Lazy vs. Virtual

Lazy: Lazy 모듈은 지연 로딩을 위해 사용됩니다. 이미지는 필요할 때만 로드되며, 주로 큰 이미지를 포함한 슬라이드에서 사용됩니다. 이는 초기 페이지 로드 시간을 줄이고 대역폭을 절약할 수 있습니다.

<Swiper
  lazy={{ loadPrevNext: true }}
  // 다른 설정
>
  <SwiperSlide>
    <Image
      src="/path/to/image.jpg"
      alt="이미지 설명"
      className="swiper-lazy"
    />
    <div className="swiper-lazy-preloader" />
  </SwiperSlide>
  // 다른 슬라이드
</Swiper>

loadPrevNext: true로 하면 슬라이드 전 후를 미리 로드 합니다.
false로 하면 현재 슬라이드 이미지만 로드됩니다.

Virtual: Virtual 모듈은 가상 슬라이드를 위해 사용됩니다. 이는 Swiper가 뷰포트에 보이는 슬라이드만 생성하고, 슬라이드를 스와이프할 때 재사용합니다. 많은 슬라이드가 있는 경우 성능을 향상시킬 수 있습니다.

<Swiper
  virtual
  // 다른 설정
>
  {slides.map((slideContent, index) => (
    <SwiperSlide key={index} virtualIndex={index}>
      {slideContent}
    </SwiperSlide>
  ))}
</Swiper>