Haruskah saya menggabungkan file js / css ke dalam satu file?

11

Kedua YSlow dan Google Page Speed add-ons sarankan untuk menggabungkan naskah (dan gaya) file ke dalam satu file masing-masing untuk mengurangi jumlah HTTP request, dan saya pasti bisa melihat titik ini ketika file naskah konsisten di seluruh situs, tetapi untuk aplikasi web yang memiliki persyaratan berbeda di seluruh situs.

Cara saya melihatnya ada beberapa opsi:

  1. Gabungkan semua file yang digunakan di seluruh situs, dan setiap halaman mendapatkan file gabungan yang sama - sisi negatifnya adalah konten yang tidak terpakai mengacaukan skrip (dan beban pertama yang lebih berat (juga memuat ulang ketika ada skrip komponen yang berubah))

  2. Gabungkan file berdasarkan per halaman - sisi negatifnya adalah setiap halaman dengan persyaratan berbeda mendapatkan file gabungan yang berbeda (beban pertama yang lebih berat untuk setiap jenis halaman)

  3. Abaikan interpretasi ketat 'satu file saja' dari rekomendasi dan minta halaman memuat beberapa file sebagaimana mestinya, dengan caching diharapkan meniadakan jumlah permintaan HTTP dalam kasus umum - downside adalah jumlah permintaan HTTP pada setiap halaman

Pikiran?

optimization css javascript Cebjyre
sumber
Kamu melakukannya dengan salah. Pisahkan bagian-bagian ke dalam file individual dan lakukan pemanasan (yang disebabkan oleh # permintaan yang lebih besar dan cache dingin) atau secara terprogram menggabungkan file sumber server di samping dan hanya melayani 1 js, css, halaman html per hard link. Mencampur file dengan tipe mime yang berbeda = buruk.
Evan Plaice
Dan ... seperti yang dikatakan @Larry Smithmier dalam jawabannya, gunakan CDN (mis. Google) untuk mengirim perpustakaan umum (mis. Jquery) untuk sepenuhnya menghindari biaya pemanasan cache awal untuk file-file tersebut.
Evan Plaice

Jawaban:

11

Opsi 2 adalah yang terburuk; itu berarti bahwa setiap halaman dengan kombinasi berbeda dari skrip JS yang diperlukan akan menghasilkan permintaan HTTP. Ini akan membuat kinerja jauh lebih buruk.

Opsi 1 adalah yang terbaik. Akhirnya sebagian besar pengguna akan mengunjungi sebagian besar "jenis" halaman situs web Anda, jadi masih menguntungkan untuk menggabungkan semuanya menjadi satu file, dengan pengecualian file JS besar yang diperlukan dalam beberapa halaman yang jarang dikunjungi.

Hit halaman pertama mungkin lebih lambat daripada dengan file yang berbeda, tetapi masih layak dilakukan karena setiap klik halaman lainnya akan menggunakan JS global yang di-cache.

Satu tip; gabungkan mereka secara otomatis jika Anda belum melakukannya!

Thomas Bonini
sumber
2
Meskipun Anda harus sangat menyadari kesan awal yang diberikan oleh halaman rumah / halaman arahan Anda. Jika halaman pertama yang dilihat pengunjung lambat untuk dimuat, mereka mungkin tidak repot-repot melihat halaman kedua.
Pelms
Pilihan lain, terutama jika situs Anda sangat bergantung pada halaman arahan atau kesan pertama yang kuat, akan meminimalkan ukuran file yang disajikan pada halaman pertama itu, dan kemudian melayani file gabungan di setiap halaman lainnya.
Travis Northcutt
4

Saya biasanya menggabungkan "global Javascript" - jQuery dan plugins umum - ke dalam satu file, dan kemudian menyajikan plugin tambahan sebagai file terpisah bila diperlukan.

Sebagai contoh, satu situs saya menjalankan banyak halaman memiliki tabel data sehingga mereka memiliki global.jsdengan jQuery, DataTable dan SuperFish (untuk menu saya). Ada dua halaman di situs yang menggunakan "lightbox" jadi saya punya skrip terpisah untuk dua halaman itu.

Untuk CSS, saya hanya menyajikan satu file untuk seluruh situs dan mencoba membuat CSS sealami mungkin - kebanyakan halaman hanya memiliki beberapa elemen CSS yang unik.

DisgruntledGoat
sumber
1

Meskipun disarankan untuk menggunakan sesedikit mungkin file, Anda mungkin menemukan bahwa Anda memiliki pemisahan antara fungsionalitas yang diperlukan pada pemuatan halaman, dan fungsionalitas yang dapat ditunda melalui pemuatan asinkron.

Jika cukup JS Anda dapat dimasukkan ke dalam kategori kedua, Anda dapat meningkatkan kecepatan muat awal yang dirasakan halaman, menciptakan pengalaman yang lebih baik bagi pengguna Anda.

JasonBirch
sumber
1

Saya tidak akan menyarankan menggabungkan semuanya. Jika Anda menggunakan perpustakaan umum, Anda dapat memanfaatkan CDN untuk mengirimkan javascripts Anda. Anda kemudian dapat mengambil keuntungan dari caching browser (dengan asumsi situs lain menggunakan CDN yang sama) dan pengiriman yang didistribusikan. Microsoft dan Google masing-masing memiliki solusi (saya juga tidak jujur ​​menggunakan, tapi saya pasti akan memulai) dan mungkin ada yang lain. Pada catatan terkait, SO memiliki pertanyaan ini:

Kapan Browser Secara Otomatis Menghapus Cache JavaScript?

dan jawaban pertama adalah emas murni.

Larry Smithmier
sumber
2
Saya sudah menggunakan pustaka jQuery yang dihosting Google, tapi maksud saya pertanyaan itu merujuk ke file situs tertentu (yaitu untuk situs pertukaran tumpukan, ketika mengajukan pertanyaan Anda punya skrip untuk mencari pertanyaan serupa, skrip yang akan di-render markdown, dan saran tag, yang semuanya mungkin ingin dikembangkan dalam file terpisah). Sebagai tambahan, jika Anda menggunakan Google jQuery yang di-host js, sementara 1.4 dan 1.4.2 keduanya akan memberi Anda konten yang sama (saat ini), 1.4.2 di-cache selama satu tahun, tetapi 1.4 hanya di-cache selama satu jam.
Cebjyre
tip keren! terima kasih atas wawasan tentang durasi caching pada jQuery yang dihosting.
Larry Smithmier