성능 최적화하기 - (10) 폰트 Preload

 

◽ 폰트 Preload (다시보기)

css가 로드된 이후에 로드되었지만 화면에 진입하자마자 폰트가 필요한 시점보다 더 먼저 load 될 수 있도록 한다.

<link rel="preload" href="{폰트이름}" as="font" type="font/woff2" crossorigin>

 

 

◽ 웹팩에서 설정하기

const PreloadWebpackPlugin = require('preload-webpack-plugin')

module.exports = function override(config, env) {
  config.plugins.push(new PreloadWebpackPlugin({
    rel: 'preload',
    as: 'font',
    include: 'allAssets',
    fileWhiteList: [/(.woff2?)/]
  }))
  
  return config;
}

 

 

 

 

---

 

 

 

출처

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 - 인프런 | 강의