# React.lazy

4개의 포스트
post-thumbnail

React와 코드 스플리팅

코드 스플리팅의 3가지 방법: 자바스크립트 함수 비동기 로딩, React.lazy와 Suspense, Loadable Components

2022년 6월 21일
·
0개의 댓글

Code-Splitting

Bundling 대부분의 리액트 어플리케이션은 webpack등의 도구를 이용해 번들링을 진행합니다. 번들링이란 어플리케이션 파일 사이의 의존성을 추적하고 합치며 하나의 "번들"이라고 불리는 파일로 만드는 과정을 말합니다. 번들은 웹페이지에 포함되어 전체 어플리케이션을

2022년 3월 15일
·
0개의 댓글
post-thumbnail

[React] 코드 스플리팅 / Dynamic Import, React.lazy

코드 스플릿팅? 🤔 번들링 대부분 React 앱들은 Webpack, Rollup, Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 “번들 된” 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있습니다. 하지만!, 앱이 커지게 되면 번

2021년 11월 14일
·
0개의 댓글

react 코드 스플리팅

프로젝트의 규모가 커질수록 파일 용량이 커지기 때문에 그로인한 사용자에게 느린환경을 경험하게 할수 있다. 이럴때 코드 스플리팅을 사용하여 첫 렌더링시 당장 필요한 코드가 아니라면 나중에 불러오게 하여 로딩속도를 개선할 수 있다.import방식을 lazy에 감싸서 필요할

2021년 3월 24일
·
0개의 댓글