[javascript] Nuxt.js에서의 레이지 로딩(lazy loading) 방법은?
Nuxt.js는 Vue.js 기반의 프레임워크로, 레이지 로딩을 간단하게 적용할 수 있습니다. 레이지 로딩은 페이지 또는 컴포넌트들을 필요할 때만 로드하여 초기 로딩 시간을 줄여줍니다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다.
페이지 레이지 로딩
Nuxt.js에서 페이지 레이지 로딩을 적용하는 방법은 다음과 같습니다. 페이지 컴포넌트를 자동으로 나누어 레이지 로딩을 적용하려면 해당 페이지 컴포넌트를 pages 디렉토리에 작성합니다.
// pages/lazy-loaded-page.vue
export default {
component: () => import('~/components/LazyLoadedComponent.vue')
}
위 예제에서 lazy-loaded-page.vue 파일에 대한 레이지 로딩을 적용하였습니다. 페이지 컴포넌트 내에서 component를 사용하여 해당 페이지의 레이지 로딩을 적용할 컴포넌트를 지정합니다.
컴포넌트 레이지 로딩
Nuxt.js에서 컴포넌트 레이지 로딩을 적용하는 방법은 다음과 같습니다. 컴포넌트를 필요할 때만 로드하기 위해 import를 사용하여 해당 컴포넌트를 동적으로 가져옵니다.
// components/MyComponent.vue
// ...
export default {
// ...
}
// ...
위의 예제에서 MyComponent.vue 파일에 대한 레이지 로딩을 적용하였습니다. 해당 컴포넌트를 필요한 페이지 또는 다른 컴포넌트에서 필요할 때 import하여 사용할 수 있습니다.
Nuxt.js에서 레이지 로딩을 적용하는 방법은 위와 같이 간단합니다. 이를 통해 애플리케이션의 초기 로딩 시간을 줄이고 성능을 향상시킬 수 있습니다.
참고 자료
```