[Vue.js] Lazy Loading Routes 공식 문서 해석, 기록

공식 문서에서의 Lazy Loading

공식 문서

• 번들러를 이용해서 앱을 빌딩하면 JS번들은 꽤나 커진다.
• 그래서 코드를 Chunk 단위로 쪼개는게 효과적이다.
• 그리고 routing 될 때만 로드 하는게 효과적이다.

Lazy Loading 하는 법

// replace
// import UserDetails from './views/UserDetails'
// with
const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

• 위처럼 import문을 "Dynamic imports" 로 변경하고, 해당 컴포넌트를 넣으면 된다.
• Vue는 라우츠의 Component를 promise형태로 반환하는 방식으로 최초 라우팅 시에만 Fetch하도록 만든다.
• 그리고 이후 부턴 캐쉬에 담은 버젼을 사용한다.
• 일반적으로, 항상 dynamic import를 사용하는게 좋다.
• 웹팩 같은 번들러를 사용하면, code splitting의 이점이 있다.