Js / css dosyalarını tek bir dosyada mı birleştirmeliyim?

Hem YSlow hem de Google'ın Sayfa Hızı eklentileri, HTTP isteklerinin sayısını azaltmak için komut dosyası (ve stil) dosyalarını her biri tek bir dosyada birleştirmenizi önerir ve komut dosyası dosyaları tüm sitede tutarlı olduğunda kesinlikle bunun noktasını görebilirim, ancak site genelinde farklı gereksinimleri olan bir web uygulaması için.

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

1. Site genelinde kullanılan tüm dosyaları birleştirin ve her sayfa aynı kombine dosyayı alır - dezavantajı, komut dosyasını karmaşıklaştıran kullanılmayan içeriktir (ve daha ağır bir ilk yükleme (herhangi bir bileşen komut dosyası değiştiğinde de yeniden yüklenir))

2. Dosyaları sayfa başına birleştirin - olumsuz, farklı gereksinimlere sahip her sayfanın farklı bir kombine dosya almasıdır (her sayfa türü için daha ağır ilk yükleme)

3. Önerilerin katı 'yalnızca bir dosya' yorumunu yok sayın ve sayfanın uygun şekilde birden çok dosyaya yüklenmesini sağlayın, önbelleğe alma genel durumda HTTP isteklerinin sayısını umursamayarak olumsuz olur - olumsuz, her sayfadaki HTTP isteklerinin sayısıdır

Düşünceler?

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

Seçenek 1 en iyisidir. Sonunda çoğu kullanıcı, web sitenizin "türlerinin" çoğunu ziyaret edecektir, bu nedenle, nadiren ziyaret edilen birkaç sayfada ihtiyaç duyulan büyük JS dosyaları hariç, her şeyi tek bir dosyada birleştirmek yine de avantajlıdır.

İlk sayfa isabeti farklı dosyalardan daha yavaş olabilir, ancak diğer tüm isabetlerde önbelleğe alınan global JS'yi kullanacağı için hala yapmaya değer.

Bir ipucu olsa; Henüz yapmadıysanız bunları otomatik olarak birleştirin!

Genellikle "global Javascript" - jQuery ve ortak eklentileri tek bir dosyada birleştiririm ve sonra gerektiğinde ekstra eklentileri ayrı dosyalar olarak sunarım.

Örneğin, ben birçok sayfa çalıştırmak bir site üzerinde veri tabloları var, bu yüzden bir global.jsjQuery, DataTables ve SuperFish (benim menü için) var. "Işık kutusu" kullanan sitede iki sayfa var, bu yüzden bu iki sayfa için ayrı bir komut dosyası var.

CSS için, tüm site için sadece tek bir dosya sunuyorum ve CSS'yi olabildiğince genel yapmaya çalışıyorum - çoğu sayfada sadece birkaç benzersiz CSS öğesi var.

Mümkün olduğunca az sayıda dosya kullanmanız kesinlikle önerilir, ancak sayfa yüklenirken gereken işlevsellik ile eşzamansız yükleme yoluyla ertelenebilecek işlevsellik arasında bir ayrım olduğunu görebilirsiniz.

Yeterli sayıda JS'niz ikinci kategoriye gönderilebiliyorsa, sayfanın algılanan ilk yükleme hızını artırarak kullanıcılarınız için daha iyi bir deneyim oluşturabilirsiniz.

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

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

ve ilk cevap katı altın.