it-swarm-id.com

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

Baik YSlow dan Google Kecepatan Halaman add-ons merekomendasikan untuk menggabungkan file skrip (dan gaya) menjadi satu file masing-masing untuk mengurangi jumlah permintaan HTTP, dan saya pasti dapat melihat titik ini ketika file skrip 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 mendapat 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 banyak file sebagaimana mestinya, dengan caching diharapkan meniadakan jumlah permintaan HTTP dalam kasus umum - downside adalah jumlah permintaan HTTP pada setiap halaman

Pikiran?

11
Cebjyre

Opsi 2 adalah yang terburuk; itu berarti bahwa setiap halaman dengan kombinasi berbeda dari skrip JS yang dibutuhkan akan menghasilkan permintaan HTTP. Itu akan membuat kinerja banyak 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!

11
Thomas Bonini

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.js dengan jQuery, DataTables 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.

4
DisgruntledGoat

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 cache browser (dengan asumsi situs lain menggunakan CDN yang sama) dan pengiriman 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 JavaScript Cache?

dan jawaban pertama adalah emas murni.

1
Larry Smithmier

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

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

1
JasonBirch