폰트 최적화 알아보기에서 설명한 폰트 preload를 실제로 구현해봤습니다.
Vite 기반 리액트 프로젝트
폰트 파일, CSS 파일, JS 파일 등 정적 파일은 빌드되면 BMYEONSUNG-94085197.woff2 같이 파일 이름 뒤에 해쉬값이 붙습니다. 이는 빌드 전에는 어떤 해쉬값이 붙을지 알 수 없습니다.
따라서 폰트 Preload를 할 때 아래와 같이 단순히 파일명만 지정하면 프로덕트에서 해당 폰트 파일을 찾을 수 없습니다.
<link rel="preload" href="BMYEONSUNG.woff2" as="font" type="font/woff2" crossorigin />관련 Vite 플러그인을 설치
빌드된 HTML 파일에 <link />를 삽입하기 위해 관련 플러그인을 설치합니다.
npm i -D vite-plugin-inject-preload플러그인 설정
vite.config.ts 파일에 설치한 플러그인을 등록합니다.
match 속성에 preload하고 싶은 파일의 정규표현식을 작성합니다. attributes 속성에는 <link />의 attributes를 입력할 수 있습니다. injectTo 속성에는 삽입할 위치를 설정합니다.
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import VitePluginInjectPreload from 'vite-plugin-inject-preload';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
tsconfigPaths(),
VitePluginInjectPreload({
files: [
{
match: /\b\w+\.woff2\b/,
attributes: {
rel: 'preload',
type: 'font/woff2',
as: 'font',
crossorigin: 'anonymous',
},
},
],
injectTo: 'head-prepend',
}),
],
});빌드된 HTML 파일
성공적으로 해쉬값이 붙은 폰트 파일을 가져오는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preload" href="/assets/BMYEONSUNG-94085197.woff2" type="font/woff2" as="font" crossorigin="anonymous">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>테스트코드</title>
<script type="module" crossorigin src="/assets/index-bd2e3430.js"></script>
<link rel="stylesheet" href="/assets/index-e9cb1838.css">
</head>
<body>
<div id="root"></div>
</body>
</html>Next.js 프로젝트
Next.js에서는 구현이 굉장히 간단합니다. next/font 모듈을 사용하면 폰트를 자동으로 최적화하고 외부 네트워크 요청을 제거하여 개인정보 보호 및 성능을 개선할 수 있습니다.
- 모든 폰트 파일에 대한 자동 자체 호스팅 기능이 내장되어 있습니다. 즉, CSS size-adjust 을 사용하여 레이아웃 이동 없이 웹 폰트를 최적으로 로드할 수 있습니다.
- CSS 및 폰트 파일은 빌드 시 다운로드되며 나머지 정적 에셋과 함께 자체 호스팅됩니다.
size-adjust
폰트의 크기를 조정할 때 사용됩니다. 이 속성은 주로 웹폰트 로딩 시 시스템 폰트와 웹폰트 사이의 시각적 차이를 최소화하기 위해 사용됩니다. 웹폰트가 로드되기 전까지 시스템 폰트를 사용할 때, 두 폰트 간의 크기 차이로 인한 레이아웃 변화를 줄여줍니다. @font-face 규칙 내에서 사용되며, 기본적으로 폰트의 높이(height)를 조정합니다.
// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts
// 로컬 폰트를 사용하기 위해 localFont를 활용
import localFont from 'next/font/local';
const BMYEONSUNG = localFont({
src: '../../assets/BMYEONSUNG.woff2',
display: 'swap',
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko" className={`h-full bg-white`}>
<body className={`${BMYEONSUNG.className} antialiased`}>
...
</body>
<Script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" />
</html>
);
}
'React' 카테고리의 다른 글
| Render Props 패턴 장단점 알아보기 (0) | 2024.07.08 |
|---|---|
| Storybook 알아보기 (1) | 2024.06.11 |
| 핵심 웹 지표(Core Web Vitals) 정리 (0) | 2024.05.28 |
| Redux와 Redux Toolkit으로 상태 관리하기 (0) | 2024.05.26 |
| 폰트 최적화 알아보기 (0) | 2024.05.25 |
