React의 지연 로딩 기능은 언제 사용해야 할까요?

Question

저는 상당히 큰 애플리케이션을 가지고 있으며 번들 크기는 이제 약 2MB(약 3개 청크)입니다. 로드 시간을 개선하기 위해 비교적 새로운 React Lazy를 사용하기로 결정했습니다.

다음은 지연 로딩의 예입니다.

const Wizard = React.lazy(() => import('./comComponents/wizards/Wizard'));

개념의 일반적인 아이디어는 이해하지만 가끔 청크가 로드될 때까지 잠시 기다려야 하는 것 외에는 여전히 단점이 무엇인지 이해하는 데 어려움을 겪고 있습니다.

내가 읽은 내용에 따르면 일반 가져오기를 사용할 이유가 없습니다.

내 질문은: 내 애플리케이션의 모든 구성 요소 가져오기에 지연 로딩을 사용해야 합니까? 왜? 왜 안 돼?

여러분의 생각을 듣고 싶습니다.

Answer 1

아직 사용을 시작하지 않았습니다. 하지만 가장 낙관적인 접근 방식은 홈페이지에 필요한 모든 구성 요소를 정기적으로 가져오는 것입니다. 홈페이지가 아닌 다른 경로는 지연 로딩을 사용해야 합니다. 이것이 제가 갖고 있는 일반적인 사고방식입니다.

Answer 2

아니요, 모든 구성 요소에 필요한 것은 아닙니다. 모든 레이아웃이나 페이지에서만 사용하는 것이 합리적입니다. 시작하기 좋은 곳은 라우팅입니다. 웹상의 대부분의 사람들은 페이지 전환을 로드하는 데 일정 시간이 걸리는 데 익숙합니다. 또한 전체 페이지를 한 번에 다시 렌더링하는 경향이 있으므로 사용자가 동시에 페이지의 다른 요소와 상호 작용할 가능성이 적습니다.

예를 들어 뉴스 집계 애플리케이션을 만들고 있습니다. 신청서는 NewsList和NewsItemPage와 같은 두 페이지로 구성됩니다. 각 페이지에는 여러 가지 구성 요소가 포함되어 있습니다. 이 예에서는 페이지마다 지연 로딩 구성 요소를 사용하는 것이 합리적입니다. 그런 다음 필요한 구성 요소를 로드합니다.

앱에 하나 더Header和Footer가 있습니다. 일반적인 방법으로 로드해야 합니다. 모든 페이지에서 사용되며 비동기식으로 로드하는 것은 의미가 없기 때문입니다.

으아아아