Dalam aplikasi web yang sedang saya kerjakan, ada 3 jenis skrip (sama berlaku untuk stylesheet):
- Yang dibutuhkan pada setiap halaman (misalnya jquery)
- Yang diperlukan pada beberapa halaman, tetapi tidak semua (mis. Perpustakaan lightbox digunakan pada halaman yang menampilkan gambar yang diunggah pengguna)
- Yang diperlukan pada satu halaman (mis. Sesuatu yang spesifik untuk fungsi halaman itu)
Haruskah setiap halaman memiliki bundel sendiri yang menggabungkan semua skrip yang dibutuhkan? Atau haruskah setiap jenis skrip menjadi bundel sendiri (mis. Sebuah halaman dapat memuat 3 bundel - essentialScripts.js, mediaLibraries.js, dan pageSpecificScripts.js)? Atau ada pendekatan yang lebih baik yang tidak saya sadari?
Apa praktik terbaik untuk menggabungkan skrip-skrip ini, dan apa keuntungan / kerugian yang ada untuk pendekatan yang berbeda?
(Saya tidak yakin seberapa relevan ini akan, tetapi proyek yang saya kerjakan menggunakan bundling ASP.NET MVC. Juga, untuk menjaga hal-hal lebih sederhana, mari kita asumsikan bahwa tidak ada file yang akan datang dari CDN pihak ke-3 jadi semuanya dimuat dari tempat yang sama dan klien tidak akan mendapatkan dari mengunjungi situs lain.)
Jawaban:
Untuk aplikasi yang kompleks, masuk akal untuk membuat pemisahan yang Anda sarankan. Bit umum Anda, terutama perpustakaan eksternal, akan berubah jauh lebih jarang daripada kode aplikasi. Jadi mereka adalah kandidat utama untuk caching. Bundling semuanya bersama-sama mencegah hal itu. Di sisi lain mereka menambahkan permintaan HTTP tambahan. Yang akan membuat pengalaman awal sedikit kurang menyenangkan. Pola umum adalah memiliki perpustakaan eksternal di satu bundel dan kode aplikasi di bundel lain. Terutama ketika yang terakhir lebih kecil dan ada banyak berbagi antara halaman dan tampilan, itu masuk akal.
Namun ini adalah Target yang bergerak. Praktik terbaik hari ini adalah anti-pola masa depan. Saran berubah di dunia di mana http / 2 adalah umum, atau ketika modul sisi klien didukung oleh semua browser utama.
sumber