Her sayfaya ana javascript yükleniyor mu? Veya ilgili sayfalara mı bölüyorsunuz?

13

700kbHer sayfaya yüklenen bir sıkıştırılmış JS dosyası var. Önce 12her sayfada javascript dosyaları vardı ama http isteklerini azaltmak için hepsini içine sıkıştırılmış 1 file.

Bu dosya üzerinden ~130kb gzippedve sunuluyor gzip. Ancak yerel bilgisayarda hala her sayfada paketten çıkarılıp yüklenir. Bu bir performans sorunu mu?

Javascript firebug profiler ile profilli ama herhangi bir sorun görmedim. Karşılaştığım sorun / yanılsama, bu dosyada sıkıştırılmış jquery kitaplıkları var ve bazen geçerli sayfada kullanılmıyor.

Örneğin, jquery datatables200kb sıkıştırılmış ve bu yalnızca web sitemdeki 2 sayfaya yüklenmiştir. Diğeri jqplotve diğeri 200kb.

Artık sayfalarda 400kbyürütülmeyen fazla kod var 80%.

Her şeyi 1 dosyada mı bırakmalıyım?

Jquery kütüphanelerini çıkarmalı ve geçerli sayfaya yalnızca ilgili JS'yi yüklemeli miyim?

— Kyle
kaynak

700kb JS koduna sahipseniz, gerçekten yeniden bölmelisiniz ve sadece gerçekten ihtiyacınız olan komut dosyalarını dahil etmelisiniz. Ayrıca, jQuery kullanarak ("… daha az yaz, daha fazlasını yap…") bu kadar büyük bir JS dosyasına sahip olmak biraz büyük görünüyor. Böyle bir JS kitlesiyle ne halt ediyorsun?

— feeela

@feeela jquery-ui, jquery.datatables'a bir göz atın. Yalnız olanlar birlikte 400kb. Ben de jquery.validate, jquery.uniform gibi kullandığım başka eklentiler var - bu şeyler ekler. xD

— Kyle

Bu durumda - aşağıda belirtildiği gibi - gerçekten komut dosyalarını

— bölmelisiniz

6

İhtiyaç duyduğunuz kitaplıkları yalnızca bu sayfalara dinamik olarak yüklemek için requirjs kullanabilirsiniz . Daha sonra, tüm sayfalara yalnızca yaklaşık 14k olan requirjs yüklemeniz gerekir, bu da yaklaşık 385kb tasarruf sağlar.

Entegrasyon da çok kolay: sadece içerme kodu ile birlikte içerir şeyler içerir:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

— Michael
kaynak

1

Bu web sitesi tasarımını gerçekten çok seviyorum. Gereksinimleri hiç duymadım. Bunu http istekleri üzerinden nasıl değerlendirirsiniz? Bu sayfaya daha fazla http isteği koymuyor mu? (o kadar da kötü değil mi?) Aptalca sorularım için özür dilerim.

— Kyle

Daha az talebe sahip olmak elbette daha iyidir, ancak> 350k'dan tasarruf etmek de çok kötü değildir. Evet, o sayfaya başka bir kütüphane eklerseniz siteniz bir istek daha yapar . Bir datatablessitede ve jqplotbaşka bir sitede varsa , sorun değil. Sayfaların% 50'sine beş libs daha yüklemek, avantajın ortadan kalkacağını kabul ediyorum. Ama sizin durumunuzda, çok iyi bir çözüm olarak görüyorum (geri kalanınızın js bir gzip dosyası kaldığını varsayarsak).

— Michael

Teşekkürler Michael. Bu çözüm oldukça parlak. Her şeyi tek bir sayfaya bölmeden önce, ama bu ... Aklımdakilerden daha iyi. Bu öneri için teşekkür ederim. Requijs hakkında bilgi sahibi olduğunuzdan, requirjs'in yeterli olacağını düşünüyor musunuz? Bazı web sitelerinde jquery ve diğer kütüphaneleri yüklemek için google kullandıklarını görüyorum google.load('...').

— Kyle

1

Google'dan (veya bunu sunan diğer sitelerden) ortak kitaplıklar yüklemenizi kesinlikle öneririz. Bunun 2 avantajı vardır: a) lib dosyası farklı siteler arasında önbelleğe alınır. Büyük olasılıkla, kullanıcının daha önce bir siteyi ziyaret etmiş olması, Google'dan yüklenen jquery'yi kullanmasıdır. Bu dosya daha sonra tekrar sunucudan değil, önbellekten yüklenir! b) o bile vardır yüklenecek, kendi web sunucusu yerine, Google CDN onu yüklemek için çok daha hızlı olacaktır.

— Michael

8

Çerçeveniz / CMS / uygun işlevlere sahipse, komut dosyasını @Michael'in önerdiği gibi, ancak ek kitaplık olmadan koşullu olarak ekleyebilirsiniz.

Örneğin, veri tabloları durumunuzu ele almak, WordPress durumu aşağıdaki gibi bir şeyle ele alabilir:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

RequireJS ile ilgili yanlış bir şey yok; yalnızca ek karmaşıklık düzeyinin (artı ilk etapta kullanmayı öğrenme) sizin için daha kolay ulaşılabilir araçların yapabileceklerini dengeleyip dengelemediğini değerlendirmeniz gerekir. Yukarıda bahsettiğiniz iki vakanız varsa, bu daha iyi bir seçenek olabilir. Çok daha fazlasına sahipseniz, RequireJS genel olarak daha iyi bir yaklaşım olabilir.

— Su'
kaynak

Themeforest'tan satın aldığım bir html şablonundan yaptığım özel bir web sitem var. Tek sorun dostum dağınık 6 JS dosyaları gibi vardı ve dağınık. Bu yüzden bunları bir dosyaya koydum ve jqplot, datatables, jquery-ui gibi birkaç kütüphane içeriyor. Bunların hepsi 550-600kb'a kadar çıkıyor. 100kb bu kütüphaneleri kullanan JS'im. Her sayfada çok alakasız JS kütüphaneleri yüklemek yerine bunu düzeltmeliyim gibi hissediyorum. Öneriniz için teşekkür ederiz! =)

— Kyle

5

700kb JavaScript bir performans sorunudur, çünkü sayfa yüklendikten sonra ayrıştırılması gerekir. Bu nedenle, sadece gerekli olan komut dosyalarının yüklenmesine dikkat etmelisiniz. Gezinme tek sayfadan ayrılmadan dahili olarak işlendiğinde, GMail gibi tüm AJAX sitelerinde büyük bir JavaScript düzgün olabilir. Ancak, tam AJAX siteleri bile başlangıçta gereksiz JS (hem bellek hem de hız sorunları) yüklenmesini önlemek için dinamik JS yüklemesi yapar.

Http trafiğini azaltmak istediğinizi söylediniz. HTTP önbellekleme ile oynamalısınız . Sorun, zaman aşımı süresini çok yüksek ayarlarsanız, JS'deki değişikliklerin önbellek süresi doluncaya kadar görünmeyebilmesidir.

Bununla birlikte, bahsetmediğiniz bir hile var myscript.js, ama myscript.js?version={myversion}. Uygulama güncellemesinden sonra {myversion}JavaScript'i değiştirmeye zorlarsınız.

— Tuna Denizci
kaynak

Yep, bu boyuttaki JS ile, çoğunlukla oldukça yaygın kütüphanelerin olduğu gerçeğiyle birleştiğinde, bir CDN kullanımı büyük fayda sağlayacaktır.

— Zhaph - Ben Duguid

1

~ 700kb JavaScript bir performans sorunudur ve sıkıştırılmışsa ve Kodu optimize etmek için uyulması gereken Kuralları görmeliyiz:

Javascripts Küçült - Basitçe, kod azaltmak değil sıkıştırma ve açma vardır, Her şeyden önce iyi Minify JS aracını kullanın ve kodunuzu küçültün. 12 Dosyasınız ve en iyi performans için kulüplenmeden önce her dosya ayrı ayrı Küçült.
Eşzamansız yükleme kullanarak, eşzamansız javascript yüklemeyi kullanın , çok hızlı yükleme süresi ve sayfanın oluşturulmasına neden olur. İyi eşzamansız yükleme oluşturma işlemini engellemediğinden ve hissedilen sayfa yükleme süresi büyük ölçüde azaldığından kullanıcı etkisi çok güçlüdür. Herhangi bir javascript yüklenmediği için resimler ve görüntülenen diğer öğeler düzenli olarak gösterilir.
JQUERY için GOOGLE cdn kullanın ; JQUERY kullandığınızı ve kendi web sitenizden yüklediğinizi düşünüyorum, bu da ek bir avantajdır, JQUERY'yi yüklemek için GOOGLE CDN (ücretsiz) kullanın. Neredeyse her 3 web sitesi tarafından kullanılıyor ve bu nedenle zaten önbellekte istemci bilgisayarda kullanılabilir.
Özel uzun Süre Sonu Başlıkları : Web sitesi yükleme süresi sorunu ile nasıl yüklenir, o zaman HTTP JS Dosyaları için Uzun Süre Sonları vermelisiniz, böylece her seferinde indirilemezler, bu da ikinci kez talebi azaltır. Araştırmamıza göre, ikinci sayfada alınan yükleme süresinin ilk sayfa ziyaretine kıyasla daha fazla çıkışı var.
Sayfa Hızı ile Kontrol Et : Bazı kaynaklar, sayfanın yükleme hızını da nazikçe kontrol eder ve ayrıca diğer kaynakları da optimize etmeye çalışır. Her kaynakta biraz adım atmak, JS yüklememize ekstra zaman kazandırır.

— Vineet1982
kaynak