[VueJS][nodeJS] 동적로드(LazyLoad) 및 webpackChunkName


[VueJS][nodeJS] 동적로드(LazyLoad) 및 webpackChunkName

동적로드(딩)란? LazyLoad 프로젝트 규모가 커질 수록 사용자 입장에서도 리소스 다운받는 양이 늘어나게 됩니다. 즉, 이것은 로딩이 지연되거나 화면이 버벅이는 현상으로 인해 사용자 입장에서는 좋은 경험으로 받아들여지지 않습니다. 그렇기 때문에 동적으로 로딩을 합니다. 대표적 사용은 이미지가 많은 페이지에서 스크롤을 내릴때 해당 스크롤 위치에 맞춰 미리 1 ~ 2개 정도만 미리 로딩해놓는겁니다. 그렇게 되면 한번에 웹페이지의 리소스인 이미지를 다운받지 않고 분할하여 다운받기 때문에 전체적인 퍼포먼스가 향상되고 사용자 경험도 매우 좋은 긍정적인 평가를 받습니다. 뷰 같은 경우에는 컴포넌트를 한번에 다운로드 받게 되는데, 이에 필요한 부분만 다운받아 쾌적한 느낌을 받을 수 있습니다. "LazyLoad"의 개념을 이해하시면, 다른 환경, 조건에서도 충분히 구현 할 수 있습니다. 파일 분할하여 저장하기 webpackChunkName 뷰에서는 대표적으로 한개의 JS에 압축하여 불러오게 됩...


#lazyload #뷰 #분할로딩 #분할로드 #분할 #동적불러오기 #동적로딩 #동적로드 #동적 #webpackchunkname #vuejs #nodejs #뷰js

원문링크 : [VueJS][nodeJS] 동적로드(LazyLoad) 및 webpackChunkName