it-swarm-tr.com

Js / css dosyalarını tek bir dosyada birleştirmeli miyim?

Hem YSlow hem de Google’ın Sayfa Hızı eklentileri, HTTP isteklerinin sayısını azaltmak için komut dosyası (ve stil) dosyalarının her birini tek bir dosyada birleştirmenizi önerir. komut dosyası dosyaları sitenin tamamında tutarlı olduğunda, ancak site genelinde farklı gereksinimleri olan bir web uygulaması için bunun amacı.

Gördüğüm şekilde birkaç seçenek var:

  1. Site genelinde kullanılan tüm dosyaları birleştirin ve her sayfa aynı birleşik dosyayı alır - olumsuz tarafı, kullanılmayan içerik betiği karıştırır (ve daha ağır bir ilk yük (ayrıca bir bileşen betiği değiştiğinde yeniden yüklenir))

  2. Dosyaları sayfa bazında birleştirin - dezavantajı, farklı gereksinimlere sahip her sayfanın farklı bir birleşik dosya almasıdır (her sayfa türü için ilk ağır yük)

  3. Önerilerin yorumunu kesinlikle 'tek bir dosya' olarak görmezden gelin ve sayfanın uygun şekilde birden fazla dosyaya yüklenmesini sağlayın; önbellekleme, genel durumdaki HTTP isteklerinin sayısını umursamazlıkla önler - olumsuz, her sayfadaki HTTP isteklerinin sayısıdır.

Düşünceler?

11
Cebjyre

Seçenek 2 en kötüsüdür; bu, farklı JS komut dosyalarının farklı bir kombinasyonuna sahip her sayfanın bir HTTP isteğiyle sonuçlanacağı anlamına gelir. Performansı çok daha kötü hale getirecek.

Seçenek 1 en iyisidir. Sonunda çoğu kullanıcı web sitenizdeki "tür" sayfalarının çoğunu ziyaret eder, bu nedenle, nadiren ziyaret edilen sayfalarda ihtiyaç duyulan büyük JS dosyaları haricinde her şeyi tek bir dosyada birleştirmek avantajlıdır.

İlk sayfa vuruşu farklı dosyalardan daha yavaş olabilir, ancak her diğer sayfa vuruşu önbelleğe alınmış genel JS'yi kullanacağı için hala yapmaya değer.

Yine de bir ipucu; Henüz yapmadıysanız otomatik olarak birleştirin!

11
Thomas Bonini

Genel olarak "global Javascript" (jQuery ve genel eklentiler) - tek bir dosyada birleştirilir ve daha sonra gerektiğinde ayrı dosyalar olarak ekstra eklentiler sunulur.

Örneğin, sayfaların çoğunu çalıştırdığım bir site üzerinde veri tabloları var, bu yüzden jQuery, DataTables ve SuperFish içeren bir global.js var (menüm için). Sitede "lightbox" kullanan iki sayfa var, bu yüzden bu iki sayfa için ayrı bir betiğim var.

CSS için, sitenin tamamı için yalnızca tek bir dosya sunuyorum ve CSS'yi olabildiğince genel hale getirmeye çalışıyorum - çoğu sayfada yalnızca birkaç benzersiz CSS öğesi var.

4
DisgruntledGoat

Hepsini birleştirmeyi önermem. Ortak bir kütüphane kullanıyorsanız, javascriptlerinizi sunmak için bir CDN'den yararlanabilirsiniz. Daha sonra tarayıcı önbelleğinden (diğer sitelerin aynı CDN'yi kullandığını varsayarak) ve dağıtılmış dağıtımdan yararlanabilirsiniz. Microsoft ve Google her birinin çözümleri var (dürüst bir şekilde kullanmadım, ancak kesinlikle başlayacağım) ve başkaları da olabilir. İlgili bir notta, SO bu soruya sahip:

Tarayıcı JavaScript Önbelleğini Otomatik Olarak Ne Zaman Temizler?

ve ilk cevap katı altındır.

1
Larry Smithmier

Mümkün olduğunca az dosya kullanmanız kesinlikle tavsiye edilmekle birlikte, sayfa yüklenirken gerekli olan işlevler ve zaman uyumsuz yükleme sırasında ertelenebilecek işlevler arasında bir bölünme olduğunu görebilirsiniz.

JS'nizin yeteri kadarı ikinci kategoriye girebiliyorsa, sayfanın algılanan başlangıçtaki yük hızını artırabilir ve kullanıcılarınız için daha iyi bir deneyim yaratabilirsiniz.

1
JasonBirch