코드 분할
: 빌드-번들링 시 파일 분리(하나로 압축)
애플리케이션 크기가 커지면 번들 파일도 커집니다.
이 시점에서 분할은 대용량 파일 발생 문제를 해결할 수 있습니다.
예를 들어
react로 구현된 페이지가 main / login / about으로 구성된 spa를 구현할 때
메인 페이지에 진입하는 동안 사용자는 다른 페이지 정보를 요구하지 않습니다.
이때 webpack은 동기적으로 로드할 청크 파일을 생성합니다.
그리고 로그인 모듈이 필요한 상황이 발생하면 청크 파일을 비동기적으로 불러와 로그인 모듈을 사용할 수 있도록 한다.
다시 말해서,
코드 분할 사용
필요한 모듈만 로드하여 초기 로딩 시간 단축 및 애플리케이션 성능 향상
자동 코드 분할
next.js 또는 cra는 자동 코드 분할을 지원합니다.
이렇게
// before
import { add } from './math';
console.log(add(16, 26));
// after
import("./math").then(math => {
console.log(math.add(16, 26));
});
자동으로 지원되는지 아니면 빌드시 자동으로 변경되는지 궁금합니다.
채팅을 요청했습니다GPT
next.js, cra는 스스로 변경한다고 합니다.
React에서 지원하는 코드 분할
React.lazy / 서스펜스
//Before
import OtherComponent from './OtherComponent';
//After
const OtherComponent = React.lazy(() => import('./OtherComponent'));
이 컴포넌트가 처음 렌더링될 때 포함된 번들을 자동으로 로드합니다.
+
이를 이용하여 서스펜스를 이용하여 페이지 변경 시 로딩 페이지를 열 수 있습니다.
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
이렇게 포장하면 페이지가 바뀔 때마다 로딩 페이지가 멈춥니다.
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}
++
코드 분할
지연 로딩
돕다
+ 뒤에 추가됨
https://helloinyong.297#title-0
참조 소스: