Lebih baik bagi pengguna dan pengembang.

Bundling baik bagi pengguna tetapi menyebabkan mimpi buruk bagi pengembang. Sangat menjengkelkan jika bergantung pada bundler selama pengembangan. Sayangnya, bundling tidak selalu opsional. Misalnya, pengembang yang harus melakukan transpilasi ditakdirkan untuk melakukan bundel.

Pramuat dan caching modul adalah dua teknik utama yang menghilangkan pengembang bundler yang digunakan tanpa alasan yang sah.

“Saya telah menjelaskan sebelumnya alasan dan efek mencolok dari pramuat modul.”

Modul cache bahkan lebih efektif, namun hal ini harus dilakukan dengan benar sehingga modul cache dapat dengan mudah diperbarui ketika versi baru aplikasi web dirilis.

Apa yang terjadi jika modul dimuat sebelumnya dan di-cache dalam cache terkini yang menyegarkan secara otomatis?

Untuk percobaan ini, saya mengadaptasi contoh halaman web yang dijelaskan dalam postingan sebelumnya tentang pramuat.

Secara singkat, selama benchmarking, saya mengukur waktu pemuatan pohon ketergantungan modul yang terdiri dari 255 modul. Pohon percobaan merupakan pohon biner sempurna dengan 8 level yang masing-masing berisi 1, 2, 4, 8, 16, 32, 64, dan 128 modul. Sebelum browser mengetahui salah satu modul daun, ia telah membuat 7 permintaan berurutan untuk memuat 7 induknya. Pohon itu murni eksperimental dan bukan kehidupan nyata.

Waktu pemuatan seluruh pohon modul diukur dalam empat pengaturan berbeda:

  • modul tidak dimuat sebelumnya dan tidak di-cache
  • modul sudah dimuat sebelumnya tetapi tidak di-cache
  • modul tidak dimuat sebelumnya tetapi di-cache ke dalam cache yang menyegarkan secara otomatis
  • modul sudah dimuat sebelumnya dan di-cache ke dalam cache yang menyegarkan secara otomatis

Pada halaman contoh, empat kondisi yang tercantum di atas diwakili oleh empat baris iframes. Halaman secara bertahap, satu per satu, memuat iframes — hanya satu iframe yang dimuat dalam satu waktu. Untuk menghitung waktu pemuatan rata-rata yang representatif untuk setiap pengaturan, sepuluh iframes dimuat ke dalam setiap baris.

Modul yang dimuat oleh masing-masing jenis iframes hanya berbeda dalam header responsnya. Modul yang tidak boleh di-cache disajikan dengan Cache-control: no-store, max-age=0, sedangkan modul yang di-cache disajikan dengan Cache-Control: stale-while-revalidate=604800.

Hasil

Anda dapat melihat hasilnya langsung di halaman contoh https://preloadandcache.onrender.com/

Catatan, modul yang di-cache disimpan dalam cache yang menyegarkan secara otomatis. Menurut saya ini adalah fitur ramah modul yang sangat keren. Lihat apa yang terjadi ketika saya sedikit mengubah kode di keempat module1.js sehingga outputnya jelas berubah. Dengan kode yang diperbarui, setiap iframe akan menampilkan milidetik diikuti dengan tanda bintang:

import val2 from './module2.js';
import val3 from './module3.js';
const total=Date.now()-t0;
 document.querySelector('div').replaceChildren(total+"*" );
 
window.parent.postMessage(total,"*");
console.log(val2+val3);

Anda menjelaskan kode pada postingan yang disebutkan di atas, tetapi di sini Anda tidak perlu memahami lebih dari pada halaman versi baru, angkanya akan diikuti oleh *. Jadi saya menerapkan versi baru halaman tersebut dan memuatnya kembali di browser:

Bagus? Modul yang di-cache disajikan dari cache, tetapi setelah menyediakan modul, browser memeriksa ke server apakah modul yang digunakan adalah yang terbaru. Jika sudah kedaluwarsa, cache akan memuat versi terbarunya dari server.

Kesimpulan

Modul pramuat secara signifikan mengurangi waktu pemuatan halaman pada kunjungan pertama. Jika modul di-cache, memuatnya terlebih dahulu pada kunjungan halaman selanjutnya hanya sedikit mengurangi waktu pemuatan halaman yang dapat diabaikan.

Saya percaya bahwa kunjungan pertama dapat dianggap sebagai instalasi aplikasi, yang diketahui oleh setiap pengguna akan memakan waktu. Jika aplikasi tidak berguna, pemuatan pertama kali yang cepat tidak akan banyak membantu. Namun, pramuat modul sangat mudah diterapkan sehingga pemuatan halaman pertama kali pun bisa dilakukan lebih cepat.

Kode contoh dapat diunduh dari https://github.com/marianc000/preloadCache

Konten lainnya di plainenglish.io