Soru Bir büyük javascript dosyası veya birden fazla küçük dosya? [çift]


Bu sorunun zaten bir cevabı var:

Tamam, bu yüzden jquery omurgasını ve diğer birkaç javascript kütüphanesini kullandığım makul bir boyut projem var. Javascript kütüphanelerim için bir dosyam ve özel kodum için bir dosyam olsaydı merak ediyordum. Ya da bir grup ayrı javascript dosyası.


40
2018-03-06 00:24


Menşei


Javascriptleri tek bir dosyada birleştirmek: stackoverflow.com/q/2799419/785207 - Sparkup


Cevaplar:


Daha az HTTP isteğine sahip olmak genellikle iyi bir fikirdir. Yani, dosya sayısını olabildiğince azaltmalısınız. makul.

Kişisel tercihim, üç "grup" JavaScript dosyasına sahip olmaktır:

  1. Çekirdek dosya. Hemen hemen her yerde kullanılan işlevleri ve diğer yararlı sayfa başlatma şeylerini içerir.
  2. Modül dosyaları. Her yerde değil, çeşitli yerlerde kullanılan kodu içerir. Ek işlevsellik sağlamak için bırakılabilir. Örneğin, tarih girişlerini işlemek için bir komut dosyanız varsa, bunu bir modül dosyası olarak ekleyebilir ve tarih girişi olan sayfalara ekleyebilirsiniz.
  3. Sayfa belirli dosyalar. Bu dosyalar sadece tek bir yerde kullanılan kodu içerir. Ayrı dosyalar olarak sayfanın bir parçası olarak eklenmesinin tek nedeni, önbellek nedenleridir.

70
2018-03-06 00:27





Bir büyük dosya. Üretime gittiğinde kodu küçültmeli ve büyükse sıkıştırmalısınız. Sayfa performansını iyileştirmek için sunucuya mümkün olduğunca az istekte bulunmak istiyorsunuz.


13
2018-03-06 00:26



Katılmıyorum. Dosyalarınızı geliştirmede ayırmalısınız, böylece yapabilirsiniz okumak Onları ve daha sonra onu paketleyen ve sıkıştıran bir dağıtım komut dosyası var. Kimse küçültülmüş kodu okumayı sevmez, ancak kullanıcıya sağlamanız gereken şey budur. - bchurchill
bchurchill - cevabımda "üretime geçtiğinde" dedim - siz kodunuzu proje başlangıcından itibaren dağıttığınız zaman çok geçicidir ve uygulama performansıyla alakasızsınız. Çalışma zamanında okunabilirlik, öğretim için güzel olabilir ancak performansa karşı çalışır. - Glenn Ferrie
İlk sayfa yüklemesine hazır olarak tüm JS dosyalarınızı neden büyük bir dosyaya gömmeniz gerekiyor? Google, ilk sayfa yüklemesini yavaşlatır ve ilk sayfa yüklemesi (giriş sayfası) üzerine ihtiyacınız olmayan JS dosyalarını ve işlevlerini ertelemeniz gerekir. - João Pimentel Ferreira


Bir büyük dosya veya iki dosya: bir küçük ve bir büyük. Açık olmak gerekirse, geliştirme sırasında iyi dosyalar var, belki de requireJS. Ancak, konuşlandırdığınızda, HTTP gecikmesini ve isteklerini azaltmak için her şeyi tek bir dosyada sıkıştırın.

İki dosyadan bahsettim. Bazı durumlarda, "bootstrap" işlemlerine dikkat çeken küçük bir dosyaya sahip olmak iyi olabilir, bu arada "büyük dosya" - özellikle eğer Gerçekten mi büyük - indirildi. Bu, özellikle ilk erişim için kullanışlıdır, çünkü kullanıcılar dosyalarınızı henüz önbelleğe almamışlardır.


9
2018-03-06 00:29



+1, iyi cevap, ama bazen çok nadiren değişecek bileşenleri ayırmak için iki veya üç "büyük dosya" oluşturarak (örneğin jquery gibi kütüphaneler) ve daha sık değişecektir (app js). Yani bir uygulama değişikliği yaparsanız, ilk bölüm hala önbelleğe alınacaktır. Tabii ki, maliyet bir daha http isteği, yani YMMV ve bu nokta. Uygulamalarımda genelde bunu yapıyorum: uygulamayı önyüklemek için bir dosya ve diğerleri için, çerçeve j'ler için bir tane ve uygulama j'leri için bir dosya. - Ben Lee
Tabii, gerçekten duruma göre değişir. Ben sadece genel bir bakış atıyorum. Fikir şu ki sadece iki seçeneğiniz yok - büyük bir dosya ya da tüm dosyayı ayrı tut - ama üçüncü bir tane de - bir "önyükleme" dosyası ve sonra geri kalanı. Temelleri ihtiyaçlara göre uyarlayabilirsiniz. - ZER0
Evet, bir bootstrap dosyasından bahsetmiş olman gerçeği, bunun en iyi cevap olduğunu düşünüyorum. - Ben Lee


Onu ayırmak en iyisi, ama aşırıya kaçmayın. Böylece kütüphane kodunuzu daha sonra tekrar kullanabilirsiniz. Ayrıca, herkes ayrı dosyalar ile çalışmayı daha çok seviyor, çünkü işleri daha düzenli tutuyor.

Bununla birlikte, her şey kolayca önbelleğe alınabilmesi için kullanıcıya tek bir sıkıştırılmış dosya vermek en iyisidir ve bu da sayfa isteklerinin sayısını azaltır. Raylar 3, örneğin varlık boru hattında otomatik olarak bunu yapar. En sevdiğiniz kompresörü çalıştırmak için bir komut dosyası yazabilirsiniz. Ama bunun için kod okunabilirliğini feda etmemelisiniz - kekinizi alabilir ve yiyebilirsiniz!


7
2018-03-06 00:25



Bu cevap doğru olmadığı için insanlar aşağılanıyor. Elbette, şeyleri organize etmek için j'lerinizi mantıksal bileşenlere bölmelisiniz. Ancak bunları, http isteklerini düşük tutmak için kullanıcıya göndermeden önce birleştirmelisiniz. Bunları yalnızca "değişmesi hiç beklenmeyen", "biraz değişme olasılığı" olan ve "sık sık değiştiren" mantıksal önbelleğe alma bileşenlerine ayırın. - Ben Lee
... cevabımın söylediği şey bu. Sadece kullanıcının büyük bir dosyayı önbelleğe almasını istersiniz. - bchurchill
Ah, cevabını gördüğümden beri düzenledin. (Ve rekor için, downvotes'un neden geldiğini açıklamaya çalışmıyorum. - Ben Lee
Evet, ilk cevabım sadece ilk kısım oldu. Sanırım dev ve üretim arasındaki farkı ilk defa açıklamamak için bunu hak ettim. - bchurchill
bchurchill Üretimde okunabilirliğe ihtiyaç duyduğunuzu düşünmüyorum, bu yüzden http isteği ve ağ gecikmesini en aza indirgemek makul bir miktardır. okunabilirlik sadece gelişim anında gereklidir - sheelpriy


Önerildiği gibi, daha küçük dosyalarla çalışmak güzeldir, ancak üretim kodu için, oluşturma işleminiz optimizasyon içermelidir. Bu optimizasyonun bir kısmı, tarayıcı tarafından yapılan aramaları azaltmak için tek bir js dosyasına birleştirerek dosya boyutlarını ve ağ trafiği optimizasyonunu en aza indirgemelidir.


0
2018-03-06 00:28





Kural olarak, sunucuya yapılan isteklerin sayısını azaltmak için mümkün olduğunca az sayıda giderim.


0
2018-03-06 00:28





Uygulamanızın boyutuna bağlıdır. Ancak javascript dosyalarınızı daha iyi bakım ve yeniden kullanılabilirlik için uygun şekilde gruplamak her zaman daha iyidir.

JS modülü yükleyici gibi kullanabilirsiniz RequireJS JavaScript'inizi yüklemek için En azından dosyalar organize edilecek. Bu dosyaların kullanıcının tarayıcılarında önbelleğe alınabildiğinden ve yalnızca bir kez indirilebildiğinden emin olarak sunucu performansını artırabilirsiniz.


0
2018-03-06 00:29