Code splitting을 위한 Pre-fetch

prefetch란 당장 사용하지 않을 컴포넌트 및 path의 리소스를 **미리 다운받아서 캐싱**하는 속성이다.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ContactView from '../views/ContactView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: **() => import('../views/AboutView.vue')  // prefetch 사용**
  },
  {
    path: '/contact',
    name: 'contact',
    component: **ContactView  // prefetch 미사용**
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Lazy load와 prefetch

빌드를 진행할 시에 소스 코드 번들이 하나의 파일이 되면서 이를 다운로드 받는 시간이 늘어나 첫 화면 렌더링 시간이 오래 걸리게 되는 문제가 발생할 수 있다. 현재 보고 있는 화면과 무관한 컴포넌트도 미리 다운로드 받는다는 것이 문제가 될 수 있다. 따라서 해당 컴포넌트가 필요할 때가 되어서야 서버에 리소스를 요청하는 방식으로 진행하는 레이지 로딩이 필요할 때가 있다.

prefetch 사용

• 아직 사용하지는 않지만, 미리 사용할 컴포넌트나 라우터를 받아놓는 방식이다.
• Lazy load로 컴포넌트를 import하면 내부적으로 prefetch 기능이 사용된다.
• prefetch하는 라우터나 컴포넌트가 많으면 첫 페이지 렌더링 시간이 오래 걸린다.
• 모든 라우트를 prefetch하는 것이 아니라, 메인 페이지에 들어왔을 때 사용자가 바로 들어갈 것 같은 페이지나 컴포넌트의 경우 선택적으로 prefetch를 적용하는 것이 더 좋을 수 있다.

prefetch 미사용

• 해당 라우터나 컴포넌트가 필요할 때 서버에서부터 받아와서 사용한다.
• 첫 페이지 렌더링이 느려지는 문제를 방지하기 위해, 최대한 prefetch를 사용하지 않고 적절한 때에만 사용하는 것이 좋다.

prefetch 디폴트 해제

Vue CLI는 prefetch 기능이 default로 들어가 있다. 따라서 이를 해제시켜주는 것이 첫 페이지 렌더링을 줄여줄 수 있는 요소가 된다.

// ~/vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  **chainWebpack: (config) => {
    config.plugins.delete('prefetch')
  },**
})

해제되었는지 확인