길잃은곰
길을 잃어 떠도는 곰
길잃은곰
전체 방문자
오늘
어제
  • 분류 전체보기 (87)
    • Algorithm (6)
    • HTML, CSS (9)
    • Frontend (1)
    • SW공학 (1)
    • WEB (4)
    • Javascript (29)
    • Typescript (0)
    • React (8)
    • Computer Science (11)
    • NEWS (0)
    • TIL(WIL) (4)
    • ETC (5)

블로그 메뉴

  • ✨깃허브
  • 홈
  • 태그
  • 방명록

인기 글

태그

  • 코테
  • EM
  • element
  • ES7
  • VW
  • PX
  • %
  • ES6
  • ES8
  • Es5
  • javascript2016
  • 자바스크립트
  • JavaScript
  • REM
  • VH
  • root-element
  • Pixel
  • 코드트리
  • 연탄
  • js2016
hELLO · Designed By 정상우.
길잃은곰

길을 잃어 떠도는 곰

React

[ React ] Lazy Loading 과 Code Splitting

2023. 1. 13. 06:06

Code Splitting

코드 스플리팅이라는 것은 Webpack, rollup, browserify 와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 번들 파일로 나누는 것을 의미한다.

하나의 번들 파일을 여러 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서이다.

번들러를 사용하는 이유는 브라우저에서 호출하는 파일 개수를 줄여 부하 발생 방지를 위해 번들러를 사용하는데, 프로젝트 규모가 커지면서, 번들링 크기도 커지고 이는 즉 번들 파일 로딩 시간이 길어지는 결과가 발생한다.

이래서 하나의 번들 파일을 여러개로 나눈 뒤, 실제 로드되는 화면의 번들 파일만 불러오고 나머지는 지연 시킴으로 더 빠른 화면을 보여줄수 있게 된다. ( Lazy Loading )

Lazy Loading

Lazy Loading 이란 게으르게 로딩 한다는 뜻으로, 로딩을 바로 하지 않고 지연 시켰다가 나중에 로딩하게 해주는 방법이다.

이 방법을 사용하는 이유는 모든 데이터를 한번에 로딩하면 로딩 시간이 오래 걸리기 때문에 일단 viewport 에 보이는 데이터만 로딩하고 나머지는 천천히 로딩하여, UX를 개선하는 방법이다.

 

저작자표시 비영리 동일조건 (새창열림)

'React' 카테고리의 다른 글

[ React ] Portal 이란 무엇인가  (0) 2023.01.20
[ React ] React Hook Form 이란  (0) 2023.01.19
[ React ] useEffect 와 useLayoutEffect 의 차이점  (0) 2023.01.13
[ React ] state 를 직접 수정하지 않고 setState 를 사용하는 이유  (0) 2023.01.13
React Lifecycle 그리고 Hooks  (0) 2022.10.17
    'React' 카테고리의 다른 글
    • [ React ] React Hook Form 이란
    • [ React ] useEffect 와 useLayoutEffect 의 차이점
    • [ React ] state 를 직접 수정하지 않고 setState 를 사용하는 이유
    • React Lifecycle 그리고 Hooks
    길잃은곰
    길잃은곰

    티스토리툴바