μ½”λ“œ λΆ„ν• 

μ½”λ“œ λΆ„ν• (Code Splitting)은 μ‹±κΈ€ νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ„±λŠ₯을 ν–₯μƒμ‹œν‚€λŠ” λ°©λ²•μž…λ‹ˆλ‹€. μ‹±κΈ€ νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜(Single Page Application)은 초기 μ‹€ν–‰μ‹œμ— ν•„μš”ν•œ μ›Ή μžμ›μ„ λͺ¨λ‘ λ‹€μš΄ λ°›λŠ” νŠΉμ§•μ΄ μžˆμŠ΅λ‹ˆλ‹€. μ½”λ“œ 뢄할을 ν™œμš©ν•˜κ²Œ 되면 초기 λ‘œλ”©μ‹œμ— λͺ¨λ“  μ›Ή μžμ›μ„ λ‹€μš΄λ°›μ§€ μ•Šκ³  ν•„μš”ν•œ μ‹œμ μ— λ‹€μš΄ λ°›μ•„ μ„±λŠ₯ μƒμ˜ 이점이 μƒκΉλ‹ˆλ‹€. 참고둜 λ·°μ—μ„œ μ½”λ“œ 뢄할이 κ°€λŠ₯ν•œ μ΄μœ λŠ” 뷰의 비동기 μ»΄ν¬λ„ŒνŠΈ λ‘œλ”©κ³Ό μ›ΉνŒ©μ˜ μ½”λ“œ μŠ€ν”Œλ¦¬νŒ… 기술 λ•νƒμž…λ‹ˆλ‹€.

개발 ν™˜κ²½ 쑰건

λ‹€λ§Œ μ§€μ—°λœ λ‘œλ”©(Lazy Loading) 방법을 μ μš©ν•˜κΈ° μœ„ν•΄μ„œλŠ” μ•„λž˜μ™€ 같은 개발 ν™˜κ²½μ„ κ°–κ³  μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.

  1. μ‹±κΈ€ 파일 μ»΄ν¬λ„ŒνŠΈ 체계 (.vue)
  2. μ›ΉνŒ© - λͺ¨λ“ˆ λ²ˆλ“€λŸ¬ (2.x 이상)
  3. 바벨 Syntax-dynamic-import ν”ŒλŸ¬κ·ΈμΈ

바벨 Syntax-dynamic-import μ„€μΉ˜ 방법

λ·° CLI둜 μƒμ„±ν•œ κ²½μš°μ—λŠ” 이미 1번과 2λ²ˆμ„ λ§Œμ‘±ν•˜κ³  κ³„μ‹€ν…Œμ§€λ§Œ 3번의 κ²½μš°μ—λŠ” λ³„λ„μ˜ μ„€μΉ˜κ°€ ν•„μš”ν•©λ‹ˆλ‹€. 바벨 Syntax-dynamic-import ν”ŒλŸ¬κ·ΈμΈ μ„€μΉ˜λŠ” μ•„λž˜μ˜ 절차λ₯Ό λ”°λ¦…λ‹ˆλ‹€.

  1. syntax-dynamic-import ν”ŒλŸ¬κ·ΈμΈ μ„€μΉ˜
npm install --save-dev babel-plugin-syntax-dynamic-import
  1. .babelrc νŒŒμΌμ— μ•„λž˜μ™€ 같이 ν”ŒλŸ¬κ·ΈμΈ μ„€μ • μΆ”κ°€
{
  "plugins": ["syntax-dynamic-import"]
}

λΌμš°ν„°μ˜ μ½”λ“œ λΆ„ν•  문법

μ‹±κΈ€ νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ λ·° λΌμš°ν„°λ₯Ό μ‚¬μš©ν•  λ•Œ λΌμš°νŒ… λ³„λ‘œ μ½”λ“œλ₯Ό λΆ„ν• ν•˜λŠ” 방법은 μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

{
	path: 'url 이름',
	component: () => import('μ»΄ν¬λ„ŒνŠΈ 이름')
}

μœ„μ™€ 같은 방법을 μ§€μ—°λœ λ‘œλ”©(Lazy Loading)이라고 ν•©λ‹ˆλ‹€. μ΄λŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜ 규λͺ¨κ°€ 컀져 μ‹±κΈ€ νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 초기 ν™”λ©΄ λ‘œλ”© μ‹œκ°„μ„ 쀄일 λ•Œ μ‚¬μš©ν•˜λŠ” λ°©λ²•μž…λ‹ˆλ‹€. μ™œλƒλ©΄ 화면이 10개인 μ›Ή 앱이 μžˆλŠ”λ° μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ 처음 μ‹œμž‘ν–ˆμ„ λ•Œ 쓰지도 μ•Šμ„ λ‚˜λ¨Έμ§€ ν™”λ©΄ 9개λ₯Ό λ‹€ λΆˆλŸ¬μ˜€λŠ” 것 λ³΄λ‹€λŠ” νŠΉμ • ν™”λ©΄μœΌλ‘œ 이동할 λ•Œλ§ˆλ‹€ ν•΄λ‹Ή ν™”λ©΄μ˜ λ‚΄μš©μ„ μΆ”κ°€μ μœΌλ‘œ λΆˆλŸ¬μ˜€λŠ” 것이 μ• ν”Œλ¦¬μΌ€μ΄μ…˜ λ‘œλ”© 속도 λ©΄μ—μ„œ 더 효율적이기 λ•Œλ¬Έμž…λ‹ˆλ‹€.

μœ„ ν™˜κ²½μ„ κ΅¬μ„±ν•˜κ³  λ‚˜λ©΄ μ•„λž˜μ™€ 같이 νŠΉμ • URL에 λ”°λ₯Έ μ½”λ“œ 뢄할이 κ°€λŠ₯ν•΄μ§‘λ‹ˆλ‹€.

const routes = [
	{
    path: '/login',
    name: 'login',
    component: () => import('./LoginPage.vue')
  },
	{
    path: '/main',
    name: 'main',
    component: () => import('./MainPage.vue')
  },
];

new VueRouter({
	mode: 'history',
	routes: routes,
});