[Vue] Component lazy loading으로 성능 높이기

크롬 브라우저에는 light house라는 웹페이지 성능 측정 탭이 내장되어 있다.

개발자 모드 -> 상단 탭 >> 모양 -> Lighthouse에 들어가면 다음과 같은 화면을 볼 수 있다.

 

현재 개발중인 웹페이지의 성능을 측정하기 위해 Performance를, Desktop용 페이지이므로 Desktop을 선택해서 "Generate report"버튼을 클릭했더니 다음과 같은 결과를 얻을 수 있었다.

31점...실화...?

다행히 Lighthouse는 어떻게 하면 성능을 개선시킬 수 있는지 대안을 함께 제시해준다.

여기서 나는 First Contentful Paint에 초점을 뒀다.

첫 실행을 어떻게 빠르게 할 수 있을까 생각해보다가, router에서 모든 페이지를 다음처럼 import 하고 있다는 것을 깨달았다.

import Login from "@/views/Login/Login";
import AfterLogin from "@/views/Login/AfterLogin";
import BeforeLogin from "@/views/Login/BeforeLogin";
import Index from "@/views/Main/Index";

이렇게 구현하면, router의 index.js가 호출될 때, 모든 페이지를 한 번에 import 하게 된다.

당장에 사용하지 않는 페이지는 리소스를 잡아먹고 있기 때문에 해당 경로를 방문할 때 페이지를 로드하는 것이 효율적이다.

 

그래서 lazy loading을 이용하기로 했다!

지연된 로딩 | Vue Router

공식 홈페이지의 설명에 따라 비동기 컴포넌트를 정의하는 방법으로 다음과 같이 구현했다.

const Login = () => import("@/views/Login/Login");
const AfterLogin = () => import("@/views/Login/AfterLogin");
const BeforeLogin = () => import("@/views/Login/BeforeLogin");
const Index = () => import("@/views/Main/Index");

그 결과! 다음과 같이 웹페이지 성능이 향상되었음을 알 수 있었다!

위의 코드는 예시를 위해 4줄의 코드만 적었지만, 프로그램상에 제작한 페이지는 약 40페이지 정도였기 때문에 상당히 극적인 결과를 얻을 수 있었다.

 

체감으로는 그다지 크지 않은 변화였지만 향상되었다는 것을 점수로 확인할 수 있어 좋았다.

차츰차츰 더 개선시켜 나가야지!

 

 

제가 잘못 생각한 부분이 있다면 항상 지적은 환영입니다 :)