Pemampatan teks & Pemisahan kod & format imej moden - Pengoptimuman prestasi

Saya mencuba perkara berikut untuk mengoptimumkan prestasi projek sampingan saya:

1. mampatan teks
2. pemisahan kod
3. format imej moden.

---

Profiler

Aplikasi yang saya bina menggunakan Vite dengan pnpm. Alat binaan web moden secara automatik mengoptimumkan prestasi web secara lalai dalam proses binaan. Jadi kita boleh pnpm run build kemudian pnpm dlx serve dist. Kemudian gunakan Lighthouse of Chrome DevTools sebagai panduan untuk menangani setiap kesesakan yang disenaraikannya.

Dayakan pemampatan teks

Ia menjejaskan FCP dan LCP.

Perkara pertama yang dicadangkan Rumah Api ialah memampatkan teks menggunakan algoritma seperti br atau gzip.

Amalan biasa ialah menambah Accept-Encoding: gzip setiap kali membuat permintaan web. Memandangkan apl yang saya bina menyajikan sumber secara setempat, saya memasang vite-plugin-compress untuk memampatkan fail.

Langkah 1: pasang vite-plugin-compress
Langkah 2: konfigurasikan fail vite.config.js dan tambah pemalam serta beberapa parameter. Seperti yang dicadangkan oleh Pembangun Google, ia harus menggunakan br(brotliCompress) pada gzip sebanyak mungkin.

Contohnya

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

Langkah 3: jalankan pnpm run build untuk memampatkan

Ia berjaya memampatkan fail .js dan .css.

Log:

✨ [vite-plugin-compression]:algorithm=brotliCompress - berjaya dimampatkan fail.

Vite akan memampatkan fail secara lalai menggunakan .gzip, tetapi brotliCompress boleh melakukan lebih baik, pemampatan semasa proses binaan:

Vite dengan gzip

bangunan vite v5.4.10 untuk pengeluaran...
✓ 654 modul diubah.

indeks-B9QUW17e.css 8.60 kB │ gzip: 2.33 kB
JedaMenu-DjZ95K-6.js 1.77 kB │ gzip: 0.62 kB
index-ohAKp9W9.js 1,688.05 kB │ gzip: 454.20 kB

Vite-plugin-compression dengan br

✨ [vite-plugin-compression]:algorithm=brotliCompress - fail dimampatkan berjaya:
JedaMenu-DjZ95K-6.js.br 1.73kb / brotliMampat: 0.51kb
index-B9QUW17e.css.br 8.40kb / brotliMampat: 1.97kb
index-ohAKp9W9.js.br 1648.49kb / brotliMampat: 345.30kb

---

Mengurangkan JavaScript yang tidak digunakan

Ia menjejaskan FCP dan LCP.

Gunakan Tab Liputan dalam Google DevTools untuk melihat skrip yang mempunyai bait yang tidak digunakan melebihi 20kbs.

Memandangkan saya menggunakan Vite dengan React, pemisahan kod ialah perkara pertama tentang mengurangkan JavaScript yang tidak digunakan.

Dalam React, dan lazy() boleh membantu dengan itu.

1. Gunakan untuk membalut keseluruhan Apl dan menyediakan UI sandaran, seperti
   Memuatkan
   , ini menyediakan UI sandaran apabila apl sedang dimuatkan.
2. Gunakan lazy() untuk membalut komponen yang tidak digunakan pada halaman awal. Contohnya, untuk permainan, apabila pengguna menekan kekunci Esc ke bawah, menu yang anda boleh bungkus akan muncul.

---

Layankan imej dengan format moden

Pembangun Chrome mencadangkan penyajian imej dalam format AVIF atau WebP. Saya memilih WebP kerana ia mempunyai lebih banyak sokongan merentas penyemak imbas.

Versi terkini Chrome, Firefox, Safari, Edge dan Opera menyokong WebP, manakala sokongan AVIF lebih terhad.

Anda boleh menyemak maklumat sokongan format imej WebP di Bolehkah saya menggunakan.

Anda boleh memasang pustaka cwebp di WebP dan gunakan arahan cwebp -q 50 images/flower1.jpg -o images/flower1.webp untuk menukar .png kepada .webp .

Arahan ini menukar, pada kualiti 50 (0 adalah yang paling teruk; 100 adalah yang terbaik), fail images/flower1.jpg dan menyimpannya sebagai images/flower1.webp.

Hasil pemampatan agak mengagumkan. Salah satu fail dikecilkan saiznya daripada 3.5 MB kepada 178kb. Malah keamatan maklumat yang rendah memberikan pemampatan 4x ganda.

Kami juga boleh menulis skrip .bat yang ringkas untuk menukar semua imej .png secara automatik di bawah folder sasaran kepada imej .webp.

viteCompression({
      verbose: true,
      disable: false,
      algorithm: 'brotliCompress',
      ext: '.br',
    }),

---

Rujukan

• Alih keluar JavaScript yang tidak digunakan
• Lihat CSS yang digunakan dan tidak digunakan dengan tab Liputan.
• Layankan imej dalam format moden.
• Mencipta Imej WebP dengan Baris Perintah
• Utiliti Prapenyusun
• Format imej WebP - Bolehkah Saya Gunakan
• Cat Kandungan Terbesar (LCP)
• First Contentful Paint (FCP)

Atas ialah kandungan terperinci Pemampatan teks & Pemisahan kod & format imej moden - Pengoptimuman prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!