CSS veya JS birleştirilirken, her sayfa türü için yeni bir dosya oluşturulur

15

Çok sayıda küçük CSS ve JS dosyamız var ve birleştirmeyi etkinleştirmek iyi bir seçim gibi görünüyor.

CSS ve JS dosyalarının çoğu her sayfada (giriş sayfası, kategori sayfası, ürün ayrıntıları sayfası) kullanılır.

Her sayfaya farklı birleştirilmiş bir dosyanın tekrar yüklendiğini gördüğümüzde, içerilen CSS'nin bile çakışması gerekir.

Bunu nasıl önleyebilir ve daha fazla veriyi nasıl yeniden kullanabiliriz?

css javascript frontend

— Alex
kaynak

Alex, farklı sayfalara farklı css ve js dosyaları ekliyor musunuz? Bu ekstra derlemenin / birleştirmenin gerçekleştiğini doğrulayan bir bağlantınız veya herhangi bir bilginiz var mı? Geçen gün bu konuda bir şeyler gördüm ve daha fazlasını bilmek istiyorum. JS'mizin yakın zamanda derlenmesini / birleştirilmesini sağlamada sorun yaşadık.

— Mark Weston

Herkese açık bir bağlantınız yok. Ancak, örneğin, ürün sayfalarında bazı ekler .cssve .jsdosyalar var. Bir Magento varsayılan kurulumunda aslında .cssdosyalar hemen hemen aynıdır, bu nedenle birleştirilmiş dosya özdeş bir karmaya sahiptir. Ancak .jsbu çok farklıdır - bu nedenle ürün sayfaları ve kategori sayfaları için yeni birleştirilmiş bir dosya vardır - her zaman tam prototip lib'i içerir.

— Alex

Önbellek bozma yardımcı olmak için "Javascript Dosyalarını Birleştir" özelliğini arıyordum. Umarım bu yorum arama motorunu günceller ve dupleri önler.

— Ray Foss

14

Kısa cevap: Magento'nun JS / CSS birleştirme işlevini asla etkinleştirmeyin. Genel olarak, tipik bir kasanın kullanım ömrü boyunca performans için her bir varlığı ayrı ayrı göndermekten daha kötüdür.

Uzun yanıt: Kullanıcılara yalnızca bir CSS dosyası sunuyorsunuz. Birden fazla dosya, tüm CSS indirilene kadar oluşturmayı engeller. Çok miktarda CSS sunmuyorsanız, hepsini bir kerede göndermek avantajlıdır, o zaman tarayıcı önbelleğe alır. Sass veya LESS gibi bir ön işlemci kullanmak, Magento'nun verimsiz bir şekilde yapmasına izin vermek yerine bu adımı oluşturma işleminize getirebilir.

JS için ideal olarak bu sunucu tarafını birleştirmemelisiniz. AMD / RequireJS gibi istemci tarafı kod yükleyicileri daha iyi seçimlerdir ve Magento'nun Layout XML'sinin yapmadığı bağımlılıkları yönetmeye yardımcı olur. Gerçek dünyada Magento, ödeme akışının birkaç noktasında senaryolara düşüyor. Birden fazla isteğin ilk sayfa yükleme isabetini alıp daha sonra ayrı ancak önbelleğe alınmış öğelere sahip olmaktan daha iyisiniz.

Fooman Speedster Advanced uzantısı, varlıkları çoğaltmadan akıllıca birleştirmek için en iyi bahistir (bugün).

Ön uç performansı için kötü uygulamalar yığınıyla başlayan Magento 1.x mimarisi ile sınırlısınız. O geminin seyrini değiştirmek gerçekçi değil. Magento 2'ye katkıda bulunun.

— Brendan Falkowski
kaynak

1

"Magento 2'ye katkıda bulunun."

— benmarks

6

Biz kullanıyoruz Fooman Speedster Magento Uzantısı . Sayfanızın performansını artırmak için CSS ve JS dosyasının birleştirilmesini sağlayan harika bir uzantıdır.

Sayfadan:

Javascript ve CSS dosyalarını birleştirerek, sıkıştırarak ve önbelleğe alarak mağazanızı hızlandırın. Fooman Speedster, daha hızlı sayfa yükleme süreleri sağlamak için birden çok Javascript ve CSS dosyasını tek bir Javascript dosyasına ve tek bir CSS dosyasına birleştirir.

— Kenny
kaynak

4

Bahsettiğin için teşekkürler. Birleştirilmiş Javascript dosyalarındaki çifte düşüşleri azaltmak için bir tema optimize edici ile birlikte gelen diğer ücretsiz Speedster uzantımı (Speedster Advanced) belirtmek istiyorum - Lütfen Ibiza Geliştirici Konferansı 2012'deki sunumuma bakın magento-developers-paradise.com / wp-content / uploads /… ayrıntılar için.

— Kristof at Fooman

Çok fazla test yaptım. Tüm fazlalıklardan kurtulmaz, ancak bazılarından kurtulur. Ve bu en iyi madencilik değil, ancak artıklık kaldırma, bir kabuk komut dosyası ile kendi başınıza yapabileceğiniz şeyleri telafi eder. @KristofatFooman Sistemi kullanabilir uglifyjs --compressve yorumlarla daha iyi başa çıkabilirseniz, kodumda yaklaşık% 4 daha küçük bir ek iyileştirme elde edebilirsiniz. düğümden uglifyjs v3 kullanarak im.

— Ray Foss