Nuxt プロジェクトに Google フォントを効率的にロードするにはどうすればよいですか?

Nuxt に Google フォントを効率的にロードする方法

NuxtJS を使用する場合、Google フォントを確実にロードするためのベスト プラクティスを考慮することが重要です。最適なパフォーマンス。 Vitaly Friedman のパフォーマンス チェックリスト 2021 で強調されているように、CDN に依存することは推奨されるアプローチではありません。代わりに、ページのオリジンを介したセルフホスティングまたはプロキシを採用することが推奨される方法です。

強く推奨されるオプションの 1 つは、@ を利用することです。 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 中国語 Web サイトの他の関連記事を参照してください。