Vue lazy loading을 활용한 렌더링 최적화

spa의 가장 큰 단점은 웹에 진입할 때 번들링한 리소스를 한번에 받는 것이다. 따라서 초기 진입 속도가 느릴 수 밖에 없다.

이를 개선하기 위해 웹팩의 코드 스플리팅을 통한 chunck를 활용하여 초기 화면에 접근할 때 필요 없는 리소스를 제외하고 필요한 경우 그때 그때 받아오는 원리가 lazy loading 이다.

 

• 1. chunck 를 하기 위한 컴포넌트와 라우트를 설정한다.
• 2. dynamic import로 선언한다.

예를 들어 Layout 컴포넌트의 자식 컴포넌트들로 MainPage, Login 두 컴포넌트를 라우팅하려고 한다.

사실 Layout은 공통 부모 컴포넌트이기 때문에 chunck로 분리하는 의미는 없지만 예시를 위해 함.

const Layout = () =>
  import(/* webpackChunkName: "Layout" */ "@/layouts/Layout");
const MainPage = () =>
  import(/* webpackChunkName: "MainPage" */ "@/views/MainPage");
const Login = () => import(/* webpackChunkName: "Login" */ "@/views/Login");

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "main",
    name: "Layout",
    component: Layout,
    children: [
      {
        name: "Main",
        path: "main",
        component: MainPage,
      },
      {
        name: "Login",
        path: "login",
        component: Login,
      },
    ],
  },
];

const routes = [
  {
    path: "/",
    redirect: "main",
    name: "Layout",
    component: () =>
      import(/* webpackChunkName: "Layout" */ "@/layouts/Layout"),
    children: [
      {
        name: "Main",
        path: "main",
        component: () =>
          import(/* webpackChunkName: "MainPage" */ "@/views/MainPage"),
      },
      {
        name: "Login",
        path: "login",
        component: () =>
          import(/* webpackChunkName: "MainPage" */ "@/views/MainPage"),
      },
    ],
  },
];

두 가지 방법 모두 가능하다.

요지는 webpackChunkName을 설정하여 dynamic import로 리소스를 분리하는 것이다.

이렇게 Chunck로 나누는 것이 어떤 효과를 지니는지 살펴보자

 

 

◎ 결과

• 빌드한 브라우저를 실행해서 network탭에 보면 chunk-venrods 이름으로 리퀘스트를 보내는데, 맨 처음 리소스를 받는 것이고 웹팩이 소스코드를 번들링해서 만든 결과물 중 하나이다. vue-cli로 vue 프로젝트를 빌드하면 웹팩을 통해 소스코드가 하나의 파일로 뭉쳐진다(번들링)
• 프로젝트 규모가 작을 땐 상관없지만 규모가 커지게되면 몇 MB까지 오르게 되고 초기 로딩 속도가 굉장히 느려진다.
• 이것을 라우터에서 컴포넌트별로 분리하여 필요한 파일만 리퀘스트를 날림

 

vue lazy loading에서 말하는 chunck는 이 chunck-vendors를 여러개로 쪼개는 것을 의미한다.

npm run build를 통해 앱을 빌드해보면 

위와 같이 빌드 후 생성된 파일이 보인다.

 

vue lazy loading을 적용한 후 다시 빌드를 하면

router.js에서 webpackChunckName을 컴포넌트에 적용한 데로 chunk가 나뉘어진 모습을 볼 수 있고 용량도 분할된 것을 볼 수 있다.

 

위 vue 프로젝트에는 MainPage, Login 2개의 라우터 자식이 존재한다.

메인페이지에 접속하면 Layout, MainPage 컴포넌트 에 대한 js파일이 로드되는것을 볼 수 있고 

 

 

LoginPage로 이동하면

Layout, Login 컴포넌트에 대한 번들링 파일이 로드되는 것을 볼 수 있다.

 

 

이처럼 필요한 번들링 파일만 로드하면서 렌더링 속도를 올리는 것이 vue lazy loading 이다.

 

 

■ preload와 prefetch

• prefetch: resource is probably needed for some navigation in the future
• preload: resource will also be needed during the current navigation

webpack 공식 문서에 있는 답변이다. 즉, preload는 현재 페이지에서 확실히 사용되는 자원들에게 적용시키고, 미래의 여러 모듈에서 사용되는 자원들은 prefetch를 적용한다.

preload는 브라우저에 필요한 자원들을 일찍이 fetch하는 개념이고

prefetch는 브라우저의 idle 타임에 지정된 자원을 캐시하여 추후에 사용되는 것에 속도를 높여준다.

 

vue-cli3 부터 prefetch 기능이 추가되었고 webpack 4.6.0부터 지원되는 기능이므로 vue-cli3가 webpack4를 탑재하면서 가능해졌다.

prefetch를 함으로써 네트워크 리퀘스트가 많아지는 경우 prefetch를 끌 수 있다

vue.config.js 파일에 다음과 같이 추가한다.

  chainWebpack: config => {
    config.plugins.delete('prefetch');
  },

 

npx vue-cli-service inspect  명령어로 현재 해당하는 웹팩 설정들을 확인할 수 있는데. 

PreloadPlugin 속성을 찾아서 prefetch의 이름이 보인다면 아직 플러그인이 삭제된 것이 아니므로 해당하는 이름으로 위의 delete안에 string값을 넣어주면 된다.

 

예를 들어 preload 플러그인도 삭제하고 싶은 경우

  chainWebpack: config => {
    config.plugins.delete('preload');
  },

 

● chaching behavior for reload, prefetch

크롬에는 네 가지의 캐시가 있다

• the HTTP cache
  • HTTP 헤더를 활용한 캐시
  • 브라우저가 시도하는 모든 HTTP 요청은 먼저 브라우저 캐시로 라우팅되어, 요청을 수행하는데 사용할 수 있는 유효한 캐시가 있는지를 먼저 확인한다. 만약 유효한 캐시가 있으면, 이 캐시를 읽어서 불필요한 전송으로 인해 발생하는 네트워크 대기시간, 데이터 비용을 모두 상쇄한다.
• memory cache
  • 일반적으로 캐시는 하드 디스크에 저장됨. 메모리 캐시는 L1, L2, L3와 같은 캐시 메모리에 저장되어 접근속도가 빠르지만 브라우저를 종료하면 사라짐
  • 
• Service Worker cache
  • 브라우저가 백그라운드에서 실행하는 스크립트
  • 채팅 메시지와 같은 작업 도중 컴퓨터가 오프라인 상태가 되는 경우 온라인이 되면 자동으로 백그라운드 동기화를 통해 작업을 진행
• Push cashe

preload, prefetch된 자원은 모두 http 캐시에 저장된다. 

만약 자원이 http cache에 있거나 Service Worker에 있는 자원을 preload 하면 같은 캐싱을 통해 받아온다.