[javascript] Parcel에서 코드 코드 분할(code splitting)을 사용하는 방법은?

22 Nov 2023

Parcel에서 코드 분할을 사용하기 위해서는 다음과 같은 단계를 따릅니다:

@parcel/config 모듈을 설치합니다.
```
npm install --save-dev @parcel/config
```
package.json 파일을 열고 parcelOptions 객체를 추가합니다. 다음과 같이 targets 속성 아래에 dist/ 디렉토리로 결과물을 출력하는 설정을 추가합니다.
```
{
  "targets": {
    "dist/": {
      "publicURL": "./"
    }
  },
  "parcelOptions": {
    "splitting": true
  }
}
```
entry.js 파일 등 애플리케이션의 진입점으로 설정한 파일을 수정하여 코드 분할을 적용합니다. Parcel은 동적 import() 함수를 통해 코드를 분할합니다. 먼저, 필요한 코드를 분할할 위치에 동적 import 구문을 추가합니다.
```
import("./module")
  .then(({ default: module }) => {
    // 분할된 모듈을 사용하는 코드
  })
  .catch((error) => {
    // 오류 처리
  });
```
이렇게 동적 import 구문을 사용하면 해당 파일이 필요한 시점에서 비동기적으로 로드됩니다.
애플리케이션을 빌드합니다. 다음 명령어를 실행하여 Parcel을 사용하여 애플리케이션을 빌드할 수 있습니다.
```
npx parcel build entry.js
```
코드 분할이 적용된 애플리케이션 번들이 dist/ 디렉토리에 생성됩니다.

이렇게 Parcel을 사용하여 코드 분할을 설정하고 적용할 수 있습니다. 코드 분할을 통해 애플리케이션의 번들 크기를 최적화하여 웹 페이지의 성능을 향상시킬 수 있습니다.

참고 자료: