Nuxt 프로젝트에서 Google 글꼴을 효율적으로 로드하는 방법은 무엇입니까?

Nuxt에서 Google 글꼴을 효율적으로 로드하는 방법

NuxtJS로 작업할 때 다음을 보장하기 위해 Google 글꼴 로드에 대한 모범 사례를 고려하는 것이 중요합니다. 최적의 성능. Vitaly Friedman의 2021년 성능 체크리스트에서 강조한 것처럼 CDN에 의존하는 것은 권장되는 접근 방식이 아닙니다. 대신 자체 호스팅을 수용하거나 페이지 원본을 통한 프록시를 사용하는 것이 선호되는 방법입니다.

강력히 권장되는 옵션 중 하나는 @ Nuxtjs/google-fonts 모듈은 Google 글꼴을 Nuxt 프로젝트에 통합하기 위한 편리한 솔루션을 제공합니다. nuxt.config.js 파일에서 이를 구성하는 방법은 다음과 같습니다.

<code class="js">export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          Mali: {
            wght: [400, 600, 700],
          },
        },
        subsets: ['latin'],
        display: 'swap',
        prefetch: false,
        preconnect: false,
        preload: false,
        download: true,
        base64: false,
      },
    ],
  ],
}</code>

이 구성은 다양한 가중치를 사용하여 Mali 글꼴 모음의 로딩을 자동으로 처리하여 각 요소에 적절한 가중치가 적용되도록 합니다.

특정 가중치가 다운로드되지 않는 문제가 발생하는 경우 모듈 구성에서 덮어쓰기 속성을 true로 설정하거나 패키지 버전을 업데이트할 수 있습니다. v3.0.0-1로.

위 내용은 Nuxt 프로젝트에서 Google 글꼴을 효율적으로 로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!