Bagaimana untuk Memuatkan Fon Google dengan Cekap dalam Projek Nuxt Anda?

Cara memuatkan fon Google dalam Nuxt dengan cekap

Apabila bekerja dengan NuxtJS, adalah penting untuk mempertimbangkan amalan terbaik untuk memuatkan fon Google untuk memastikan prestasi optimum. Bergantung pada CDN bukanlah pendekatan yang disyorkan, seperti yang diserlahkan oleh Senarai Semak Prestasi Vitaly Friedman 2021. Sebaliknya, menerima pengehosan sendiri atau proksi melalui asal halaman ialah kaedah pilihan.

Satu pilihan yang sangat disyorkan ialah menggunakan @ modul nuxtjs/google-fonts, yang menawarkan penyelesaian yang mudah untuk menyepadukan fon Google ke dalam projek Nuxt anda. Begini cara anda boleh mengkonfigurasinya dalam fail nuxt.config.js anda:

<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>

Konfigurasi ini secara automatik akan mengendalikan pemuatan keluarga fon Mali dengan pelbagai pemberat, memastikan berat yang sesuai digunakan pada setiap elemen dalam komponen Vue anda.

Sila ambil perhatian bahawa jika anda menghadapi masalah dengan pemberat tertentu yang tidak dimuat turun, anda boleh sama ada menetapkan sifat timpa kepada benar dalam konfigurasi modul anda atau mengemas kini versi pakej anda kepada v3.0.0-1.

Atas ialah kandungan terperinci Bagaimana untuk Memuatkan Fon Google dengan Cekap dalam Projek Nuxt Anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!