개발하는데 다 이유가 있겠지

1. 코드 스플리팅
2. 레이지 로딩
3. 파일 포맷 변환
4. 캐싱
5. 비동기, 지연 로딩

---

1. 코드 스플리팅

자바스크립트 파일을 필요한 부분만 나누어 로드할 수 있습니다. 이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선할 수 있습니다.

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

 

2. 레이지 로딩

페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식을 적용할 수 있습니다. 예를 들어, 사용자가 페이지를 스크롤할 때 하단의 이미지가 필요해지면 그 때 비로소 이미지를 불러오는 것입니다. 이렇게 하면 불필요한 리소스 로딩을 줄여 성능을 높일 수 있습니다.

<img loading="lazy" src="image.jpg" alt="lazy loaded image">

 

3. 파일 포맷 변환

이미지 파일에 대해서 파일의 물리적인 크기를 알맞게 줄이거나 WebP와 같은 가벼운 포맷으로 변환하는 방법이 있습니다. 이를 통해 불필요한 용량을 줄이고 로딩 속도를 향상시킬 수 있습니다.

"WebP는 PNG보다 평균 26% 더 작은 파일 크기를 제공합니다"

 

4. 캐싱

캐싱을 활용해 한 번 로딩된 리소스를 다시 다운로드하지 않고 브라우저가 캐시된 데이터를 재사용하여 성능을 크게 향상시킬 수 있습니다. 적절한 캐시 정책을 설정하는 것이 매우 중요합니다.

 

5. 비동기(async), 지연(defer) 로딩

자바스크립트 로딩 시에는 `비동기(async)`, `지연(defer)` 로딩을 적용하여 자바스크립트가 DOM을 차단하지 않도록 할 수 있습니다. 이를 통해 페이지가 로딩되는 동안에도 자바스크립트 파일을 병렬적으로 불러오거나, 적절한 타이밍에 로드하게 되어 사용자 경험이 더 쾌적해질 수 있습니다.

<script async src="script.js"></script> <!-- HTML 파싱과 병렬로 실행 -->
<script defer src="script.js"></script> <!-- HTML 파싱 완료 후 실행 -->

 

---

2024.11.06 - [프론트엔드/React] - [React] 코드 스플리팅 (Code Splitting)