Vue Lazy load
-
Vue Lazy Load(비동기 컴포넌트)란?개발/Front-end 2021. 8. 24. 23:12
1. Lazy Load 사용하는 목적 Vue CLI를 통해 빌드하면 소스 코드가 하나의 파일로 합쳐집니다. 이때 큰 프로젝트는 파일 용량이 매우 커집니다. 이 때문에 사용자는 웹 사이트 처음 접속 시 큰 파일을 다운로드하느라 초기 랜더링 시간이 오래 걸리게 되며 랜더링 속도가 너무 늦어지게 됩니다. 즉 현재 보고 있는 화면과 무관한 내용까지 받아서 오래 걸리게됩니다. 따라서 Lazy Load를 이용하여 리소스를 컴포넌트 단위로 분리하여 필요한 것들만 그때그때 라우트 단위 혹은 컴포넌트 단위로 다운로드할 수 있게 하는 방법입니다. Lazy Load는 Lazy '가능한 길게 일을 미루는 행위'란 의미에 Load 단어를 합쳐 페이지 내에서 실제로 필요할 때까지 리소스 로딩을 미루는 것입니다. 2. prefet..
-
Vue Lazy load 적용하기개발/Front-end 2021. 8. 24. 20:45
이번 시간에는 Vue Router 설정 중 Lazy Loading Routes를 사용하는 실습을 진행하겠습니다. 해당 실습은 vuejs 가이드 문서를 참고해서 만들었습니다. 만약 Lazy Load에 대한 개념이 어렵다면 이전 게시물인 Vue Lazy Load(비동기 컴포넌트)란? 에 대한 포스팅을 읽고 오시는 것을 추천합니다. 1. Vue 기본 CLI 세팅 1-1. Vue CLI 설치 아래는 vue cli를 설치하는 명령어입니다. $ npm install -g @vue/cli 1-2. Default 옵션으로 프로젝트 설치하기 해당 옵션으로 프로젝트를 생성하는 경우 기본적으로 설정된 값으로 설치가 됩니다. 1-2-1. vue 프로젝트 생성 vue create [프로젝트 명] 명령어를 실행합니다. 여기서 프..