nuxtjs/google-fonts는 Nuxt를 사용합니다.js로 웹 글꼴 읽기 가속화

며칠 전 이 기사가 화제가 됐어요, Nuxt.나는 js에도 같은 기능이 있는지 조사했다.
https://zenn.dev/catnose99/articles/bb943c3dc99d89

@nuxtjs/google-fonts

https://github.com/nuxt-community/google-fonts-module @nuxtjs/google-fonts는 Google Fonts용 Nuxt입니다.js의 모듈입니다.이 모듈의 옵션은 download 및 inject입니다.js의 Font Optimzation과 동일한 작업을 수행할 수 있습니다.

실제로 해봤어요.

시도한 창고는 이거야.
https://github.com/odan-sandbox/nuxt-font-optimization-sandbox nuxt.config.js에 다음 설정이 추가되었습니다.
nuxt.config.js

  buildModules: [
    ['@nuxtjs/google-fonts', { families: { Inter: true }, display: 'block', download: true, inject: true }]
  ],

이 상태에서 실행nuxt build/generate하면 로컬 글꼴 파일과 읽을 CSS 파일이 생성됩니다.

옵션inject이 활성화되면 생성된 CSS 파일을 글로벌 CSS로 자동으로 읽습니다.

끝말

원래 Nextjs 기사를 봤을 때,Nuxt.만약 js가 같은 기능이 없다면, 나는 스스로 해 보고 싶지만, 이미 있다.
Next.는 js 분석 HTML 자동 대체의 구조이지만 Nuxt입니다.js는 모듈로 제공된 것으로 옵션의 설정으로 내부에서 전개되는 구조로 사상적으로 차이가 있다.개인적으로 Nuxt는js의 방법은 간단하고 알기 쉬워요.