Pemuatan Skrip Pihak Ketiga yang Efisien

Dalam kebanyakan kasus, skrip pihak ketiga bersifat sekunder, pertama-tama kita perlu melakukan bootstrap dan menjalankan aplikasi kita terlebih dahulu sebelum skrip pihak ketiga karena

Kinerja Penting

Jadi pilihan pertama tentu saja
Menggunakan atribut async atau defer pada tag ‹script›

Ini bagus untuk satu atau dua skrip tetapi jika Anda memiliki
1. Beberapa alat analisis 📈
2. Skrip integrasi pembayaran seperti Chargebee 🤑
3. Alat pencatatan kesalahan seperti Sentry. io ⚠️
4. Bot obrolan seperti Hubspot Chat 💬
5. Alat pembaruan produk seperti Beamer 🆕
6. Dan mungkin bahkan lebih seperti yang kami miliki di organisasi kami sebelumnya.

Async dan defer berfungsi dengan baik tetapi skrip yang disebutkan di atas mengarah ke rangkaian permintaan untuk
1. Skrip lain
2. Panggilan XHR.
3. Style sheet

Ini menyumbat bandwidth pengguna sehingga menghambat pemuatan dan bootstrap aplikasi host yang menyebabkan pengalaman pengguna buruk.

Jadi apa yang bisa kita lakukan:

Hapus jika tidak memberikan nilai tambah yang jelas pada situs Anda. (Yang tidak selalu menjadi pilihan)
Optimalkan proses pemuatan. (Ayo coba ini)

Jadi hal pertama yang pertama kita harus memuat skrip sebagai bagian dari aplikasi React/Angular dan bukan bagian dari index.html. Karena javascript memberi kita kontrol lebih besar atas pemuatan daripada HTML.

Jadi inilah versi React dari solusi ThirdPartyLoadingComponent

Jadi fungsinya loadScript sudah cukup jelas, kami mencoba keajaiban di bawah ini:

    if ('scheduler' in window) {
      window.scheduler?.postTask(loadScript, { priority: 'background', delay });
    } else if ('requestIdleCallback' in window) {
        setTimeout(() => {
          requestIdleCallback(loadScript)…

Pemuatan Skrip Pihak Ketiga yang Efisien