4) Vue 메뉴구성하기_Lazy Load(비동기 컴포넌트) 구성하기

그나저나 이전의 VueRouter설치할때, 

미니 프로젝트인 수강시스템을만들면서, 할적에도

router-link 가 App.vue에; 있는지를 자세히 안보고 팀원들한테 얘기했었던게 생각났닿ㅎㅎㅎㅎ....

정말 소름끼친다. 

 무튼, 이게 원래 여기에 존재했구나 라는것을 깨달았고, 

천천히 꼼꼼히 공부를 이어가야겠다.

 

---

오늘의 강의 주요내용 :

- 라우터에서 컴포넌트를 load 하는 방법 이해하기

- Lazy Load 적용하기

- Prefetch 이해하기 (중요: UX사용자경험) -> 적절히 조화를 이루어야한다. (성능향상에 영향을끼치는 요소) 

1. 전혀Prefetch를 이용을 안하고, 방문하는 순간에 Prefetch되게끔하는 방법 

실무  : 사용자가 접속할지 안할지 몰라 그리고, 처음에 얘까지 로딩시키면 굉장히 무거울 것 같아! 

하는것들은 이것을 이용해서, 그 페이지를 이동하는 순간에 로딩하게끔 설계 

2. Prefetch를 적용해서, 첫 화면 로딩될 때 캐시에 올리게 하는방법 

실무  : 제일 초기에 사용자가 바로 접근할 가능성이 높은 페이지/컴포넌트의경우 Prefetch:true하여 몇개 올려놓는다.

3. 처음에 몽땅~ 내려받게하는 방법 (Prefetch를 아예안씀) 

 

 

 

 

 

 

 

 

 

---

전혀Prefetch를 이용을 안하고, 방문하는 순간에 Prefetch되게끔하는 방법 같은경우,

캐시메모리에 등록이돼있다.

기존 : app.js 파일 하나로 한 번의 통신(request)로 response를 받아오는데,  

about.js 을 추가하므로써, 파일이 아래처럼 2개가 분리가 되니까 

 

두개의 request를 날려서 두 번 response를 받아야된다. -> 이렇게 될 시 속도 저하를 가져온다. 

 

위의 About을 클릭하는 순간 

아래로 하나 더 생기는걸 볼 수있다. 

이렇게 클릭하는 순간 그 때야 비로소 사용할 수 있게끔 클라이언트로 내려주게되는것이다. 

그전에는 캐시(cache=메모리) 에만 있다. ( 클라이언트로 내려가지 않은 상태! )

그래서, 캐시(cache) 에 올려놓고, 사용자가 페이지를 방문하는 순간에 클라이언트로 내려져서 바로 사용할 수 있게끔 

그래야 애플리케이션에 화면전환속도가 굉장히 빠를 수 있게끔하기위해서이다! 

 

그래서 기존의 차이점을 말하면, 

lazy-loaded 를 사용하지 않을 때 : 

기존에는 클라이언트에 이미 다~ 내려와있는 상태 

 

lazy-loaded 를 사용 했을 때 : 

캐시(cache) 에만 들어가있다가 클릭하는 순간 그 때 클라이언트로 떨어지게된다. 
이러한것들이 굉장히 많아지면, 초기화면 로딩할때 굉장히 느려지는경향이있다.

왜냐? 파일을 다 분리해놓고, 캐시(cache) 에 올리기위해서 다~request를 날려서 통신이 여러번 일어나기때문에

실제 첫화면이 로딩될때의 속도와 성능은 저하되는것이 확인되었다.

하지만! 화면이 전환될때는 훨씬 이득이있었다. 

 

 

따라서 이러한 장점들을 생각하여 어떤것을 lazy-loaded 를 사용할지 안할지

이러한 설계들을 하는것이  프로젝트를 진행할 때 굉장히 중요한 Tip이다.

그런데, 기본적으로 Vue-Cli를 이용해서 만들면, 기본적인 load가 razy-loaded이므로 프리패치를 이용하는 모드이다.

따라서, 일단 이용하지 않겠다고 삭제를 할 수 있는데, 

아래와같이 vue.config.js파일을 만들어준후에, 아래의 코드를 입력하면 삭제가된다. 

 

 

 

근데?

특정 리소스는 prefetch를 적용하고 싶다면? 

아래와같이 비동기 컴포넌트 로딩할때 아래와 같이 웹펙 주석을 달아준다! 

 

 

+ 강사님답변 : 주석의 용도

> /* */ 안에 내용을 보시면 일반적인 주석처럼 아무 내용이나 적을 수 있는게 아니고 특정한 형식을 갖는 정해진 key/value만 넣을 수 있게 한 것을 보면 주석 안에 내용을 파싱하고 자바스크립트 오브젝트 key/value 처럼 사용하는 것으로 추측

> 요지는 주석으로 되어 있지만, 프로그램적으로 사용하는 것은 가능하다는 취지에서 답변

 

 

 

 

 

 

 

 

정리 : 

접속 빈도가 높은 컴포넌트에 대해서는 prefetch 기능 사용하지 않고,

최초에 애플리케이션 접속시 한번에 관련 리소스를 다운로드 해서,

해당 컴포넌트를 접속했을 때 바로 로딩 되게 할 수 있게 된다.

상대적으로 접속 빈도가 덜 한 컴포넌트에서 대해서 prefetch 기능을 사용하면 되고,

접속 빈도가 가장 낮은 컴포넌트에 대해서는 접속하는 순간에 다운로드 설계하는 것이좋다. 

 

 

이외 참고자료 : 

https://jeongwooahn.medium.com/vue-js-lazy-load-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B02-3f1a2f4a4ee8

[Vue.js] Lazy load 적용하기2

+ 인프런 _ 개발자의품격