CommonJS 등의 모듈은 트리쉐이킹이 안됨.
∴ 번들 분석 진행 → 큰 크기의 종속성이 ESM 변형 패키지를 제공하는지 확인하여 교체.
확인 방법: package.json 내에 module 항목이 있는지 확인하여 ESM 형식으로 제공되지 않으면 업데이트가 있는지, 패키지 이름이 변경되어 ESM 형식 모듈이 있는지 확인
TSConfig: module 속성을 로 설정하는 실수가 종종 있음. 이는 번들러의 실제 출력이 아닌 컴파일된 타입스크립트를 받는 중간 형식을 변경하기 때문에 같은 ESM 형식으로 변경해야함.
{
"name": "project",
"version": "1.0.0",
"sideEffects": false
}
가장 효과적인 최적화 방법
오히려 많은 문제 발생 원인이 되기도 함
→ 프로세스가 시작될 때 코드를 로드하면 사전에 로드하는 것보다 사용자 환경이 나빠짐. 따라서 지연 로드가 일어날 위치를 생각하는 것이 중요.
동적 import 문을 통해서 JS 코드를 지연 로드할 수 있음. 라우터 수준에서 유용하게 활용할 수 있음
import('./Module').them(module => {});
React.lazy, Suspense를 함께 활용해서 컴포넌트 지연 로딩을 쉽게 설정할 수 있음.
동적 import 호출은 React.lazy로 묶고, Suspense 컴포넌트 내에서 일반 컴포넌트로 사용.
const LazyViewer = React.lazy(() => import("./Viewer"));
const App = () => (
<Suspense fallback={<Spinner />}>
<LazyViewer />
</Suspense>
);