리소스 힌트 개요

웹 성능 향상을 위해 브라우저에 리소스 로딩 우선순위를 지시하는 prefetch와 preload를 활용할 수 있습니다. 두 기술 모두 link 태그의 rel 속성으로 구현됩니다.

<!-- 리소스 미리 가져오기 -->
<link rel="prefetch" href="리소스_URL">

<!-- 리소스 우선 로딩 -->
<link rel="preload" href="리소스_URL" as="리소스_타입">

Prefetch 동작 방식

Prefetch는 향후 네비게이션에서 필요할 수 있는 리소스를 백그라운드에서 미리 로드합니다. 프로젝트 구조를 생성합니다:

mkdir resource-optimization
cd resource-optimization
npm init -y
npm install -D http-server
mkdir assets

HTML에서 스크립트 미리 가져오기:

<!-- prefetch-demo.html -->
<link rel="prefetch" href="utils.js">
<script src="loader.js"></script>

동적 로딩 구현:

// loader.js
const loadBtn = document.createElement('button');
loadBtn.textContent = 'Load Resource';

loadBtn.onclick = () => {
  const resource = document.createElement('script');
  resource.src = 'utils.js';
  document.head.append(resource);
};

document.body.append(loadBtn);

브라우저 네트워크 탭에서 utils.js가 prefetch cache에서 로드되는 것을 확인할 수 있습니다.

Preload 실행 메커니즘

Preload는 현재 페이지에서 곧 사용될 리소스를 높은 우선순위로 로드하고 파싱합니다.

<!-- preload-demo.html -->
<link rel="preload" href="core.js" as="script">

3초 내에 리소스를 사용하지 않으면 브라우저 콘솔에 경고가 표시됩니다.

Webpack 통합 구성

Webpack에서 자동화하려면 플러그인을 설치합니다:

npm install -D webpack webpack-cli 
npm install -D html-webpack-plugin 
npm install -D preload-webpack-plugin@3.0.0-beta.4

동적 임포트 설정:

// main.js
document.getElementById('load').addEventListener('click', () => {
  import(/* webpackChunkName: "dynamicModule" */ './core.js');
});

Webpack 설정 파일:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  plugins: [
    new HtmlWebpackPlugin({ filename: 'preload.html' }),
    new HtmlWebpackPlugin({ filename: 'prefetch.html' }),
    new PreloadWebpackPlugin({ 
      excludeHtmlNames: ['prefetch.html'] 
    }),
    new PreloadWebpackPlugin({
      rel: 'prefetch',
      excludeHtmlNames: ['preload.html']
    })
  ]
};

빌드 실행:

npx webpack