프리페치와 프리로드는 웹팩에서 리소스 로딩을 최적화하는 두 가지 방법이며, 역할과 사용 시나리오가 다릅니다:
Prefetch
- 역할: 프리페치는 브라우저가 유휴 상태일 때 특정 리소스를 미리 로드하여 이후 페이지 탐색의 로딩 속도를 개선하는 데 사용됩니다. 현재 페이지에서 향후에 사용할 수 있지만 현재 페이지에는 필요하지 않은 리소스에 적용됩니다.
- 시나리오: 경로 아래의 컴포넌트, 비동기적으로 로드된 모듈 등 향후 페이지에서 사용될 수 있는 리소스에 적합합니다. 이러한 리소스는 현재 페이지에는 필요하지 않지만 다음 사용자 작업에 필요할 수 있습니다. 이러한 리소스는 현재 페이지에서 로드할 필요는 없지만 사용자의 다음 작업 단계에서 필요할 수 있습니다.
Preload
- 역할: 미리 로드는 특정 리소스가 현재 페이지 로드에 필수적이며 페이지 로드 시 우선순위로 로드 및 프리페치해야 함을 브라우저에 알리는 데 사용됩니다. 글꼴, 중요한 JavaScript 파일 등 현재 페이지에 필요한 주요 리소스에 적용됩니다.
- 사용 시나리오: 현재 페이지 로딩에 매우 중요하고 현재 페이지의 로딩 성능을 향상시킬 수 있는 리소스에 적합합니다. 이러한 리소스는 현재 페이지의 로딩 및 렌더링에 중요하며, 성능 향상뿐만 아니라 로딩이 완료된 후 이러한 중요한 리소스를 요청하는 모양을 방지할 수도 있습니다.
차이점 및 함께 사용하는 이유
- 차이점: 프리페치는 향후 필요할 수 있는 리소스를 미리 로드하는 데 사용되는 반면, 프리로드는 현재 페이지에 필요한 주요 리소스를 미리 로드하는 데 사용됩니다.
- 둘 다 사용하는 이유: 둘 다 사용하는 목적은 페이지 로딩 성능을 최적화하기 위해서입니다. 프리로딩은 다음 페이지의 로딩 속도를 개선하고 프리페칭은 향후 특정 상황에서 사용자 경험을 개선합니다. 두 가지를 동시에 사용하면 리소스 요구 사항에 따라 전반적인 페이지 로딩 성능을 향상시킬 수 있습니다.
일반적으로 프리로드와 프리페치는 다양한 상황에서 페이지 로딩 성능을 개선하기 위해 웹팩에서 제공하는 최적화 기능입니다. 현명하게 사용하면 리소스 요구 사항에 따라 전체 페이지 로딩 효율을 최적화하는 데 사용할 수 있습니다. 최상의 성능 최적화를 달성하기 위해 어디에서 어떻게 사용할지 결정하는 것은 사용자의 몫입니다.
vue 구성에서
1. 웹팩 플러그인 제거 이 두 플러그인의 기본 사용 방법은 다음과 같이 프로젝트에서 모든 사전 로딩을 제거하는 것입니다:
chainWebpack: (config) => {
// // 프리로드 플러그인 제거
config.plugins.delete("preload");
// 프리페치 플러그인 제거
config.plugins.delete("prefetch");
},
2. 개별 페이지 구성 프리페치
const PageA = () => import(/* webpackPrefetch: false */ '@/views/PageA');
const PageB = () => import('@/views/PageB');
export default new Router({
routes: [
{ path: '/pageA', name: 'PageA', component: PageA, },
{ path: '/pageB', name: 'PageB', component: PageB, },
],
});
이 예제에서 PageA 컴포넌트의 어노테이션에 webpackPrefetch: false 설정되어 있으므로 다른 페이지에 액세스할 때 PageA 관련 리소스가 미리 로드되지 않습니다. PageB의 경우 어노테이션이 설정되어 있지 않으며 기본적으로 사전 로드 메커니즘이 사용됩니다.
이러한 방식으로 다양한 페이지 컴포넌트에 대해 사전 로드 또는 프리페칭을 설정할지 여부를 제어할 수 있습니다. 이를 통해 리소스 로딩을 보다 세분화된 방식으로 제어할 수 있습니다.
패키지된 index.html에서 해당 js 리소스 파일은 링크 형태로 로드됩니다.
