레이지로딩 (lazy loading)이란? + vue 적용 예시

1. 레이지로딩 (lazy loading)이란?

레이지 로딩이란 중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술을 의미합니다.

 

레이지 로딩의 목적은 (1) 최초 페이지 로딩 시간을 개선하고 당장 화면에 표시되지 않는 이미지, 영상 등의 리소스를 나중에 로딩하면서 (2) 최초 데이터 전달 양을 감소시키는 것입니다.

 

SPA 기법에서 웹페이지를 로딩하는 기존 방식은 모든 리소스들을 한 번에 받는 것입니다.

 

이렇게하면 최초 로딩 시간이 더 커지게 되는데, 이러한 로딩 시간 증가는 인터넷 연결 속도가 느린 지역이나 디바이스를 사용할 때 특히 더 두드러지게 체감됩니다.

 

이 문제를 해결하기 위해 사용할 수 있는 테크닉이 레이지 로딩인 것입니다.

 

레이지 로딩을 적용하면, 화면에 당장 보여지지 않거나 아직 유저의 인터렉션이 일어나지 않은 특정 리소스들의 로딩을 딜레이시킬 수 있습니다. 이 방식을 적용하면, 당장 필요한 컨텐츠들이 먼저 로딩되고, 다른 리소스들은 필요해질 때 로딩되기 때문에 웹 페이지의 퍼포먼스를 눈에 띄게 개선할 수 있습니다!

 

레이지 로딩은 주로 이미지와 영상들에 적용됩니다. 만약 레이지 로딩 테크닉이 페이지에 적용된 경우, HTML 마크업의 이미지 태그는 최초로 플레이스 홀더 또는 이미지의 적은 해상도 버전을 적용하게 됩니다. 유저가 스크롤을 내려서 해당 이미지가 뷰포트에 들어오게 될 경우, 자바스크립트가 그 플레이스홀더를 대체하면서 제대로된 사이즈의 이미지를 로딩하게 되는 것입니다.

 

이미지나 영상 뿐만 아니라, 다이나믹 컴포넌트, 방대한 양의 스크립트, 외부 위젯 등 다른 컨텐츠에도 적용될 수 있습니다.

 

이렇듯 용량이 컨텐츠들을 추후 필요해질 때 추가 로딩하도록 개발을 진행한다면, 최초 페이지 로딩 시간을 줄이고 사용자 경험을 개선할 수 있습니다!

 

2. vue에서의 laze-loading

2.1 lazy-loading 하기 전

lazy loading을 하기 전, 웹에 진입을 하면 개발자 도구 - Network 탭에 chunk-vendors라는 이름으로 request를 보내는 것이 있습니다.

 

이 chunk-vendors가 맨처음 리소스를 받는 것입니다.

 

프로젝트의 규모가 작다면 무시할 정도로 Size가 작지만, 규모가 커지게되면 몇 MB까지 오르게되어 굉장히 초기 로딩이 느리게 되는 거죠

 

그래서 우리는 이 chunk-vendors 용량을 나누어 다른 화면에서 리소스를 받도록 할 것입니다.

 

2.1 lazy-loading 

1. chunk를 분리하고자 하는 컴포넌트 혹은 라우트를 정합니다.

- 첫화면에서 굳이 필요 없는 리소스를 파악합니다.

 

2. dynamic import를 이용하여 분리합니다.

- 아래 코드와 같이 컴포넌트를 분리하면 webpackChunkName이 설정되며, 웹팩이 그 기준으로 리소스를 분리하여 빌드합니다.

// routes.js
const Sales = () => import(/* webpackChunkName: "Sales" */ '@views/Sales');

const routes = [
  { path: '/', name: 'home', component: Home },
  ...
  { path: '/sales', name: 'Sales', component: Sales },
  ...
];

3. 분리된 빌드 파일 확인

 

위 예시에서는 sales라는 라우트를 분리시켰습니다.

 

yarn build를 통하여 빌드된 파일을 확인해보면 chunk-vendors와 더불어 sales라는 파일이 분리되어 빌드 된것을 확인 할 수 있으며, chunk-vendors의 용량이 이전보다 줄어든 것을 확인 할 수 있습니다.

lazy-loading 장점 및 유의점

여러 개의 webpackChunkName으로 분리하면 그만큼 초기 렌더링 시간은 줄어들 것입니다. 그러나 화면 이동할때마다 리소스를 받기 때문에 사용자 ux적인 면은 좋지 않을 수 있으니, 프로젝트의 특성에 따라 적절하게 분리하는 것이 중요합니다.

 

리소스를 분리시킴으로 나오는 또다른 장점은 코드가 업데이트되었을 때입니다. 리소스가 분리되지 않았다면 코드가 한줄이라도 변하면 다시 용량 큰 청크파일을 받아야하지만, 분리되었다면, 변경된 파일만 다운 받게 되어 그만큼 효율이 좋아집니다!

 

참고 블로그

https://seo-tory.tistory.com/84

레이지로딩(lazy loading)이란?

https://kyounghwan01.github.io/blog/Vue/vue/lazy-loading/#vue%E1%84%8B%E1%85%A6%E1%84%89%E1%85%A5-laze-loading

vue lazy-loading 하는법, 최적화, computed, watch, vue2