dynamic import를 이용하여 빌드시간 단축

문제 : 배포하는 과정에 빌드가 너무 오래걸려요. 

원인: PDF를 렌더링하기 위해 pdfjs-dist 라이브러리를 사용하고 있습니다. 이미지를 보면  node_modules/canvas/build 의 용량을 보면 상당히 많은 용량을 가지고 있으며, 많은 용량을 차지하는 canvas를 여러페이지에서 dependency를 가지고 생긴 이슈입니다.

pdf를 렌더링하는 곳만 동적으로 모듈을 불러와 사용할수 있도록 dynamic import를 이용하여 성능최적화를 하였습니다. 

11분에서 2분!!!

dynamic import(동적 임포트)란 

dynamic import란 자바스크립트에서 모듈을 피요한 시점에 동적으로 로드하는 기능을 말합니다. 

dynamic import(동적 임포트) 동작원리

1. 동적 임포트 함수 호출
2. 모듈 로드 요청 - import 함수가 호출되면 자바스크립트 엔진은 해당 모듈을 로드하는 요청을 생성합니다. 요청은 브라우저 네트워크 스택을 통해 웹 서버에 전송됩니다.
3. 서버 요청 처리 - 서버는 받은 요청을 처리하고 요청된 모듈을 찾습니다. 요청된 모율이 존재하면 서버는 해당 모듈을 클라이언트에게 전송
4. 모듈 다운로드 - 서버로 받은 모듈을 다운로드하고 메모리에 저장
5. 모듈 실행 - 엔진에 의해 해석되고 실행됩니다. 이 과정에서 모듈의 의존성도 로드됩니다.
6. Promise 반환 - 모듈이 로드되고 실행되었다며, import 함수는 promise를 resolve하고, 해당 모듈의 객체를 반환합니다. 객체를 통해 로드된 모듈을 사용
7. 에러 처리 - 로드 중에 오류가 발생하면 promise는 reject하고 오류를 처리합니다.

정적 임포트와 동적 임포트의 차이

• 로드 시점:
  • 정적 임포트는 모듈이 로드되는 시점에 동기적으로 실행됩니다. import 구문이 실행되는 순간 해당 모듈이 로드되고 해당 모듈의 모든 의존성이 해결된 후 현재 스코프에 바인딩됩니다.
  • 동적 임포트는 런타임 중에 모듈을 필요한 시점에 동적으로 로드합니다. 초기화되는 단계에서 모듈을 미리 로드하지 않고 실제 필요한 시점에 필요한 모듈을 로드합니다.  실행 중인 코드의 흐름을 차단하지 않음.
• 번들링
  • 정적 임포트는 번들러가 번들을 생성할 때 모든 import 구문을 고려하여 모든 의존성을 해결한 후 하나의 번들로 생성합니다.
    번들 파일은 웹서버에 호스팅되어 클라이언트가 애플리케이션을 로드할 때 다운로드되고 실행됩니다.
  • 동적 임포트는 코드분할을 통해 필요한 모듈을 개별적인 청크로 분리하여 로드하므로 초기 로드 시간을 최적화할 수 있습니다.
    로드되는 모듈은 번들링 시점에 결정되지 않으며, 필요한 시점에 비동기적으로 로드됩니다. 이 때 각 모듈을 개별적으로 청크 파일로 생성됩니다.
    
    웹팩은 동적임포트를 만나면 해당 모듈을 개별적으로 청크로 분할하여 번들링합니다.