Apakah ini praktik yang baik untuk memiliki satu bundel per tampilan di Asp Net MVC

Karena bundling dan minifikasi adalah semua tentang pengoptimalan dan membuat halaman memuat lebih cepat, menurut saya masuk akal untuk membuat satu bundel untuk skrip dan satu bundel untuk gaya per basis tampilan, sehingga untuk memuat semua skrip dan gaya yang dibutuhkan browser paling banyak membuat 2 permintaan. Jadi katakanlah saya memiliki tempat di _Layout.cshtmlmana saya memerlukan 3 file js bootstrap.js, jquery.jsdan beberapa custom1.jssaya dapat membuat satu bundel, sesuatu seperti ini:

bundles.Add(new ScriptBundle("~/bundles/layout").Include(
          "~/Scripts/bootstrap.js",
          "~/Scripts/jquery.js",
          "~/Scripts/custom1.js"));

Lalu katakanlah saya memiliki pandangan lain di User.cshtmlmana saya perlu bootstrap.js, jquery.jsdan custom2.js, sekali lagi saya membuat satu bundel:

bundles.Add(new ScriptBundle("~/bundles/user").Include(
          "~/Scripts/bootstrap.js",
          "~/Scripts/jquery.js",
          "~/Scripts/custom2.js"));

Pendekatan yang sama dapat digunakan untuk bundel gaya. Tapi dari apa yang saya lihat itu bukan praktik yang umum untuk melakukannya dengan cara ini biasanya bundel dibuat berdasarkan tipe, misalnya, satu untuk bootstrap, satu untuk jquery, satu untuk file js / css khusus, dll. Tetapi tidak akan meningkatkannya waktu pemuatan halaman, karena memiliki lebih banyak bundel berarti lebih banyak permintaan ke server. Juga apa masalah melakukan sesuatu seperti yang saya jelaskan di awal?

Saya pikir itu mungkin bahkan kontraproduktif untuk menggunakan satu bundel per halaman.

Ada overhead untuk pembuatan bundel ... meskipun, overhead itu dikeluarkan satu kali per instance aplikasi (itu di-cache oleh aplikasi setelah panggilan pertama), tetapi jika Anda memiliki bundel baru untuk setiap halaman, itu berarti untuk setiap halaman yang berbeda Anda kunjungi, bundel baru harus dibuat sebelum dapat dilayani. Itu akan default tujuan bundel secara signifikan, saya pikir.

Sebaliknya, saya biasanya memiliki dua bundel: satu bundel inti yang diharapkan oleh setiap halaman dan hampir tidak akan pernah berubah begitu proyek awal diatur. Ini termasuk gaya inti, jQuery / KO, perpustakaan pangkalan-vendor lainnya.

Bundel kedua biasanya konteks per aplikasi (mis., Bundel Pengguna mungkin memiliki hal-hal modular yang terkait dengan pengguna secara umum, tetapi tidak harus ke halaman tertentu).

Apa pun yang spesifik halaman biasanya tidak masuk ke dalam bundel.

Efek kinerja praktis dari bundling (setidaknya untuk aplikasi bisnis yang cenderung saya tulis) tidak terlalu bagus, mengingat begitu klien menyebutnya pertama kali, itu ada di sana sampai akhirnya berubah lagi.

Jika Anda memiliki situs publik tempat Anda mengharapkan lebih banyak pengunjung pertama kali, Anda mungkin mengambil pendekatan yang sedikit berbeda.

Tidak.

Karena caching peramban, Anda mendapatkan hasil keseluruhan terbaik dengan menggunakan bundel atau bundel yang sama di semua halaman. Ini berarti bahwa pengguna akan mengunduh semua css dan js ketika mereka menekan halaman pertama dan menggunakan kembali file itu pada halaman berikutnya.

Mengingat bahwa sebagian besar bundel akan dikemas kerangka kerja javascript seperti jquery dan bootstrap. Beberapa byte tambahan dari kode khusus Anda memiliki efek yang tidak signifikan pada keseluruhan kecepatan pemuatan halaman.

Kelemahan dari bundel per halaman adalah bundel yang di-cache dari satu halaman tidak dapat digunakan pada halaman lain, yang biasanya Anda inginkan adalah sebagian besar skrip Anda (mis. JQuery bootstrap dll ...) sedang diunduh satu kali dan di-cache untuk semua halaman di situs

Solusi "optimal" dari perspektif caching adalah memiliki satu bundel yang berisi semua .js untuk semua halaman di seluruh situs, kelemahan dari pendekatan itu adalah bahwa bundel tersebut berakhir menjadi cukup besar yang berarti beban halaman awal Anda lebih lambat , yang mungkin tidak diinginkan untuk situs web yang menghadap pelanggan di mana tayangan awal adalah segalanya.

Solusi "terbaik" kemungkinan akan menjadi campuran teknik, misalnya

• Bundel "inti" (hal-hal seperti jQuery dan Bootstrap yang digunakan pada hampir setiap halaman,) ditambah bundel per halaman
• Satu bundel untuk seluruh situs, mungkin tidak termasuk halaman berat javascript yang menambah banyak ukuran bundel