Code Splitting

코드 스플리팅(Code Splitting)은 프론트엔드 개발에서 사용되는 테크닉으로, 번들링된 애플리케이션의 크기를 줄이고 로딩 성능을 향상시키기 위해 사용됩니다. 웹 애플리케이션에서 적절한 코드 분리 및 로딩을 통해 초기 로딩 시간을 줄이고, 사용자에게 필요한 기능만 로드하여 최적화된 사용자 경험을 제공할 수 있습니다.

크게 세 가지 방식으로 코드 스플리팅을 실행할 수 있습니다:

1. 엔트리 포인트 분리 (Entry Points Splitting): 웹팩(Webpack) 등의 모듈 번들러를 사용하여 구성 시 여러 엔트리 포인트를 지정합니다. 각 엔트리 포인트마다 빌드 파일이 생성되어 필요한 파일만 불러올 수 있습니다.
2. 비동기 로딩 (Asynchronous Loading): 코드를 로드하는 데 필요한 시점이 되면 동적으로 로드하는 방식입니다. 예를 들어, 사용자가 특정 페이지에 방문하거나 버튼을 클릭할 때 해당 기능을 포함하는 코드 조각을 비동기적으로 로드하는 것입니다.
3. 매직 주석 (Magic Comments): 웹팩(Webpack)과 같은 모듈번들러에서 제공하는 주석을 사용하여 코드 스플리팅을 구현합니다.석을 사용하여 각 파일의 이름을 지정하고, 필요한 파일을 분리하여 로딩 시 커스텀 설정이 가능합니다.