반응형 동적 임포트 활용2 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. 이전 1 다음 반응형
