Svelte는 기본적으로 코드 분할을 지원하는 컴파일러를 제공하여 애플리케이션의 번들 크기를 최적화할 수 있습니다. 코드 분할은 애플리케이션을 더 작은 청크(chunk)로 나누는 것을 의미합니다. 이렇게 분할된 청크는 필요할 때 동적으로 로드될 수 있으므로, 초기 페이지 로드 시에 필요한 최소한의 코드만 전송하여 사용자 경험을 향상시킬 수 있습니다.

Svelte에서 코드 분할을 하려면 import() 함수를 사용하여 동적으로 모듈을 가져와야 합니다. import() 함수는 Promise를 반환하며, 해당 모듈이 로드되고 사용 가능해질 때까지 대기합니다.

예를 들어, 다음과 같이 동적으로 모듈을 로드할 수 있습니다.

import { onMount } from 'svelte';

onMount(async () => {
  const module = await import('./heavyModule.js');
  // 필요한 로직을 수행하거나 컴포넌트로 전달합니다.
});

위의 예제에서 ./heavyModule.js 파일은 애플리케이션이 처음 로드될 때 필요하지 않은 기능이 있는 큰 모듈이라고 가정합니다. 이 모듈은 import()를 통해 동적으로 로드되므로, 초기 페이지 로드 시에는 필요하지 않습니다. 필요한 시점에 모듈을 로드하여 앱의 성능을 최적화할 수 있습니다.

더 자세한 내용은 Svelte 공식 문서를 참조하시기 바랍니다.