최적화

비동기 컴포넌트

• 중요하지 않은 컴포넌트(로딩, 세부사항, 조건이 충족할 때, 조건이 충족하지 않아 로드할 필요가 없는 컴포넌트)들을 나중에 천천히 로드하겠다는 뜻이다.
  • 이는 사용자가 로드할 때 최소한의 컴포넌트를 로드하여 조금이라도 더 빠른 컴포넌트를 로드하여 사용자로 하여금 더 빠른 서비스를 경험하게 한다.

main.js에서 import 문이 있을 때마다 임포트하는 파일에 있는 코드가 필요하다고 Vue에 지시하는데 결국 main.js에 있는 모든 임포트는 프로젝트를 구축할 때, 프로젝트를 마무리할 때 임포트한 모든 파일은 기본적으로 하나의 큰 파일로 합쳐진다고 생각하면 된다.
즉, 비동기 컴포넌트를 사용하면 필요할 때만 임포트하고 그러면 큰 파일에 병합되지 않고 대신 필요할 때만 Vue가 필요한 코드를 다운로드한다.

defineAsyncComponent

const 비동기컴포넌트 = defineAsyncComponent(()=>import('비동기컴포넌트경로.path'))

app.component('비동기-컴포넌트', 비동기컴포넌트);

• 필요할 때만 비동기적으로 로드할 컴포넌트를 정의할 수 있다.

• 변수를 상수로 생성한다.

  • 저장한 값은 defineAsyncComponent를 호출한 결과이다.
  • defineAsyncComponent는 함수(arrow function)를 취한다.
  • 마지막에 임포트한 컴포넌트를 반환하는 함수를 취하지만 Vue는 컴포넌트가 필요할 때만 해당 함수를 호출한다.
  • 여기서는 화살표 함수의 축약어(무명함수) 표기를 사용해서 import를 호출한다.
  • 함수로 import를 호출한다. import를 함수로 호출하면 주변 코드를 실행될 때만 import를 수행하게 된다.
  • 이 함수는 컴포넌트가 필요해서 사용될 때만 Vue에 의해 실행된다.

라우트 defineAsyncComponent

• 라우트 단에서 코드분할할 일이 가장 많을 것이다.
  • 왜냐하면 특정 경로를 전혀 방문하지 않으면 라우트 컴포넌트에 있는 코드와자식 컴포넌트를 전부 fetching하기 때문이다.

const CoachDetail = defineAsyncComponent(()=>import('./pages/coaches/CoachDetail.vue'))
const CoachRegistration = defineAsyncComponent(()=>import('./pages/coaches/CoachRegistration.vue'))

• 이제 더 작은 크기의 초기 번들을 다운로드할 수 있고 필요할 때 추가 컴포넌트 코드를 다운로드하면 되니까 이게 비동기 컴포넌트를 사용하는 이유이고 우리가 알고 있어야 하는 핵심 최적화 단계이다.

const CoachDetail = () => import('./pages/coaches/CoachDetail.vue')
const CoachRegistration = () => import('./pages/coaches/CoachRegistration.vue')

• 위와같이도 가능함.