반응형 효율적인 코드 분할3 14. 효율적인 코드 분할 - 3 Vendor 코드 분리 웹팩(Webpack)을 사용하는 프로젝트에서 Vendor 코드 분리는 애플리케이션의 성능을 최적화하는 데 중요한 역할을 합니다. Vendor 코드란 주로 라이브러리와 프레임워크 등과 같이 변경이 적고 자주 사용되는 외부 라이브러리를 말합니다. 이러한 Vendor 코드를 분리함으로써 브라우저가 새로운 버전의 애플리케이션을 로딩할 때 중복 다운로드를 피하고 캐시를 효과적으로 활용할 수 있습니다. 1. Vendor 코드의 중요성 Vendor 코드는 주로 다음과 같은 특징을 가지고 있습니다. 변경이 적음: Vendor 코드는 상대적으로 자주 변경되지 않습니다. 예를 들어, React, Vue, lodash와 같은 라이브러리는 프로젝트의 수명 주기 동안 상대적으로 변경이 적습니다. 자주 사.. 2023. 12. 24. 13. 효율적인 코드 분할 - 2 동적 임포트 활용 JavaScript의 모듈 시스템은 코드의 재사용성과 유지보수성을 향상시키는데 큰 기여를 하고 있습니다. ES6부터 지원되는 동적 임포트는 특히 런타임에서 모듈을 필요에 따라 동적으로 로딩하는 데 사용됩니다. 이 기능은 코드 분할(Code Splitting)과 함께 사용되어 대규모 애플리케이션에서 필요한 모듈만 로딩하여 성능을 향상시킬 수 있습니다. 1. 동적 임포트의 개요 동적 임포트는 import() 함수를 사용하여 모듈을 비동기적으로 로딩하는 것을 말합니다. 이는 런타임 시에 모듈이 필요한 순간에만 로딩되게 할 수 있습니다. 기존의 정적 임포트는 빌드 타임에 모든 모듈을 로딩하는 반면, 동적 임포트는 런타임에 필요한 모듈만 로딩되므로 초기 로딩 속도를 향상시키는 데 기여합니다. /.. 2023. 12. 24. 12. 효율적인 코드 분할 - 1 코드 분할의 개념 코드 분할(Code Splitting)은 대규모 웹 애플리케이션에서 번들 크기를 줄이고 초기 로딩 속도를 개선하기 위한 기술입니다. Webpack은 코드 분할을 지원하여 애플리케이션을 더 효율적으로 관리할 수 있게 도와줍니다. 1. 코드 분할이란? 대부분의 웹 애플리케이션은 여러 페이지와 모듈로 구성되어 있습니다. 코드 분할은 애플리케이션의 여러 부분을 별도의 청크(chunk)로 나누어 각 페이지 또는 기능이 필요로 할 때 동적으로 불러오도록 하는 것을 의미합니다. 2. 코드 분할의 장점 2.1. 초기 로딩 속도 개선 큰 번들을 한 번에 로딩하는 것은 초기 로딩 속도를 늦출 수 있습니다. 코드 분할을 통해 필요한 부분만 로딩하므로 초기 로딩이 빨라집니다. 2.2. 사용자 경험 향상 페이.. 2023. 12. 24. 이전 1 다음 반응형
