Vue Router 방식 비교하기 (webpackChunkName, webpackPrefetch)

Introduction

Vue, React, Angular.js 등으로 만들어진 SPA(Single Page Application)는 페이지의 렌더링을 서버에서 처리하지 않고 브라우저가 담당하기에 페이지 갱신 시, 새로고침 되는 방식이 아니라 변경이 필요한 부분만 교체되는 방식으로 작동하기에 좋은 사용자 경험을 줄 수 있다.
하지만, 맨 처음 사이트에 들어왔을 때 필요한 정적 리소스를 한 번에 내려받기 때문에 느리다는 느낌 또한 받을 수 있다.
이러한 문제를 Vue Router 방식을 변경함으로써 최적화를 시켜보자.

Router 설정

main.js

import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

router를 추가한다.

src/router/index.js

import HomeView from '@/views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]

• path
  - 접근 경로
  - App.vue의 router-link의 to 경로와 일치해야함
• name
  - 페이지명
  • 유일한 값 사용
• component
  - 가져올 컴포넌트명
  • 위 코드상에서는 HomeView.vue를 가져옴

Router 3가지 방식

1. 위처럼 import 후 처리 방식 (일반적으로 쓰임)

import AboutView from '@/views/AboutView.vue'

const routes = [
  ...
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },
]

app.js 파일에 포함되어 맨 처음 사이트에 들어왔을 때 같이 실행된다.

2. "webpackChunkName" 별도의 js로 분리되는 방식

const routes = [
  ...
  {
    path: '/about',
    name: 'about',
    component: () =>
      import(/* webpackChunkName: "about" */ '@/views/AboutView.vue')
  },
]

/about 에 접근했을때 지정한 이름의 js파일로 로드된다.

3. "webpackPrefetch" 미리 캐시에 담아두는 방식

const routes = [
  ...
  {
    path: '/about',
    name: 'about',
    component: () =>
      import(/* webpackPrefetch: true */ '@/views/AboutView.vue')
  },
]

<link rel="prefetch" as="script" href="/js/about.js">

prefetch로 동작하여, 맨 처음 사이트에 들어왔을 때 해당 js파일을 로드하여 캐시에 담아둔다.

결론

페이지의 크기가 작고, 사용자가 들어갈 가능성이 비교적 적다면,
webpackChunkName 설정을 해준다.
페이지의 크기가 크고, 사용자가 들어갈 가능성이 높다면,
webpackPrefetch 설정을 해줘서 보다 빠르게 로딩될 수 있게 한다.
그 외는 일반적인 import방식의 라우팅을 한다.

위 3가지 방식을 알맞게 사용한다면, 웹 페이지 로드 시간을 최적화할 수 있다.

참고자료

Vue Router
개발자의품격 부트캠프