[Vite + React] Preload로 폰트 최적화하기

Dev

[Vite + React] Preload로 폰트 최적화하기

양나니 2024. 5. 7. 19:58

1. index.html에서 link 태그에 preload 추가

-> 가장 간편하고 보편적인 방법. 프로젝트 규모가 작거나 폰트 파일이 한두개라면 수동으로 link 태그를 추가하면 됨

// index.html
<head>
        <link
			rel="preload"
			href="src/assets/fonts/PretendardVariable.woff2"
			as="font"
			type="font/woff2"
			crossorigin="anonymous"
		/>
</head>

2. build 시 동적으로 html 주입하기

createHtmlPlugin 사용위해 vite-plugin-html 설치

npm install -D vite-plugin-html

폰트 폴더에서 프리로드할 폰트 선택

// src/utils/fontPreload.ts

import { readdirSync } from 'fs'
import { resolve } from 'path'

import { HtmlTagDescriptor } from 'vite'

const fontsDirectory = resolve(__dirname, '../../src/assets/fonts')
console.log('fontsDirectory', fontsDirectory)

const fontFiles = readdirSync(fontsDirectory).filter(
	(file) => file.endsWith('.woff2'),
)

export const injectFontsToHead: HtmlTagDescriptor[] = fontFiles.map((fontFile) => ({
		injectTo: 'head',
		tag: 'link',
		attrs: {
			rel: 'preload',
			href: `src/assets/fonts/${fontFile}`,
			as: 'font',
			type: 'font/woff2',
			crossOrigin: 'anonymous',
		}
}))

vite.config.ts에서 src/util 폴더에 접근하려면 tsconfig.node.json 파일의 include부분에 해당 파일을 추가해야함

// tsconfig.node.json
{
	"compilerOptions": {
		...
	},
	"include": ["vite.config.ts", "src/utils/font.ts"]
}

vite.config.ts에서 injectFontsToHead 코드 주입

// vite.config.ts

import { createHtmlPlugin } from 'vite-plugin-html'
import { injectFontsToHead } from './src/utils/font'

export default defineConfig({
	plugins: [..., createHtmlPlugin({ inject: { tags: injectFontsToHead } })],
})

두 방법 사이에 성능 차이는 없는 것 같고(두 방법 모두 17~30ms 내로 불러옴) 프로젝트 관리 방법에 따라 선택하면 될 것 같다.

vite 설정을 건드는 건 귀찮지만 프로젝트가 크고 자주 업데이트 된다면 자동화해서 사용하는 게 편할 수도 있을 것 같다.

중요한 건 꼭 첫 화면에 필수적인 폰트만 프리로딩하는 것!

참고 https://velog.io/@oo009pbh/Vite를-통해-다운받은-폰트를-preloading-해보자