CSS ve Javascript ile HTML nasıl küçültülür?

Question

Belge içinde CSS ve Javascript içeren bir .html belgesine sahibim (harici dosya yok). belgesini minimuma indirecek bazı çevrimiçi araçlar var mı ve Javascript bazı çok küçük ayak izi için mi? Tüm değişkenlerin ve işlev adlarının tek harfli isimlerle değiştirildiği vb. Pek çok okunabilir metin göremedim. Lütfen öneri edin.

Answer 1

Düzenleme 2 (22 Şubat 2017) de denemek isteyebilirsiniz gerçek duymuş: Artık varlıklarınızı küçültmek için en iyi araç (ve yükleyicileri ve eklentileri ekleyerek bir sürü daha fazlası) kesinlikle Webpack. config

Örnek onu tüm .css bir dosyayı taşımak ve küçültmek için:

{ 
    test: /\.css$/, 
    use: [ 
    { 
     loader: 'css-loader', 
     options: { 
     minimize: true 
     } 
    } 
    ] 
} 

---

Düzenleme 1 (16 Eylül 2014): Daha da iyisi, şimdi var görev koşucularGulp veya Grunt gibi.

Görev koşucular zaman alıcı sıkıcı (ama çok önemli) bir proje geliştirme yaparken zorunda görevleri yapmak birçok otomatik hale getirmek için kullanılan küçük uygulamalardır. Bunlar, testlerinin çalıştırılması, dosyaların birleştirilmesi, küçültme ve CSS önişlemi gibi görevleri içerir. sadece bir görev dosyası oluşturarak, görev yürütücüsüne otomatik olarak her türlü geliştirme görevini halledebilirsiniz. dosyalarınızda değişiklik yaptığınızda bunu düşünebilirsiniz. Bu size çok zaman kazandıracak ve geliştirmeye odaklanmanıza izin verecek çok basit bir fikir olan .

Okunmalı: JavaScript dizilimin hem küçültme (ve JSHint) ile görevin Getting started with Gulp.js

Örnek:

gulp.task('scripts', function() { 
    return gulp.src('src/scripts/**/*.js') 
    .pipe(jshint('.jshintrc')) 
    .pipe(jshint.reporter('default')) 
    .pipe(concat('main.js')) 
    .pipe(gulp.dest('dist/assets/js')) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(uglify()) 
    .pipe(gulp.dest('dist/assets/js')) 
    .pipe(notify({ message: 'Scripts task complete' })); 
}); 

---

Orijinal cevap (19 Temmuz 2012): Ben tavsiye JS ve CSS'nizi küçültebilen HTML5 Boilerplate Build Script.

Answer 2

manyavailableminifiers'dan birini kullanarak. CSS'yi minimuma indiren evensome.

Answer 3

İyi javascript kompresör de Google's Closure Compiler ve bunun tersi, sıkıştırılmış kodun daha iyi okunabilmesi için Javascript Beautifier kullanabilirsiniz. Ayrıca phpEasyMin projesine de bakabilirsiniz.

Answer 4

denedim asla ama Google'ın kapatılması compiler..You iyi yorumlar

Answer 5

JavaScript kodu JavaScript içinde sıkıştırılmış ve açılmış olsa da (diğer cevaplara bakın), CSS'de aynı sonucu elde etmek gerçekten zordur.Şu anda HTML ve CSS arasındaki bağlantıyı bozmadan tanımlayıcı ve sınıf isimleri değiştirilemediğinden, gereksiz boşlukları kaldırmaktan daha fazlasını yapacak bir araç yok (ayrıca bkz. Are there any agressive CSS Minification tools?).

Ayrıca, boşluk dışındaki HTML işaretlemelerinden hiçbir şeyi kaldıramazsınız. Eh, sınıf isimlerini ve tanımlayıcısını küçültebilirsiniz, ancak şu anda CSS/JS dosyalarınızda bu küçültülmüş değerleri güncelleyecek hiçbir araç yok, bu yüzden web sitenizi çirkin ve kırık hale getirecektir. Ve hatta bazı CSS etkilerini elde etmek için boş öğelere bile ihtiyaç duyulmaktadır (evet, size bakıyorum, IE6). Bu, JavaScript işlev adları için de geçerlidir.

TL; DR: Ne yazık ki hepsi bir arada-minify-her şey aracı yoktur. En yakın şey htmlcompressor.

Answer 6

Sana iki adımda bunu yapmak gerekecek korkuyorum:

css üzerine işi bitirmek için minifiers ve js

1. manuel arama ve bir metin editörü küresel nesnelerin yerini

   Bir süre önce (küresel nesneler ve nesne tuşları hakkında) benzer bir soruyu yaşadım. Aldığım cevap, hiçbir aracın küresel bağlam hakkında varsayım yapmamasıydı. Örneğinizde, sağladığınız başka bir html veya js fragmanı tarafından kullanılabileceğinden "pageLoad" değerini küçültmeyeceklerdir.

   sizin örnekte bir geçici çözüm pageLoad fonksiyonu yerel yapmak ve komut dinamik onload olay eklemek olacaktır:

   elt.onload=function(){pageLoad();}; 
   

Answer 7

Closure compiler doğru JS için tavsiye edilmiştir; Ancak pek çoğu Google’ın Closure stylesheets’dan haberdar değil. kapatma stil özelliklerinden biri

<style> 
    .descriptive-parent-class-name .descriptive-element-class-name {color:red;} 
</style> 
<div class="descriptive-parent-class-name"> 
    <p class="descriptive-element-class-name">Lorem ipsum</p> 
    <p class="descriptive-element-class-name">Lorem ipsum</p> 
</div> 

<style> 
    .a-b .a-c {color:red;} 
</style> 
<div class="a-b"> 
    <p class="a-c">Lorem ipsum</p> 
    <p class="a-c">Lorem ipsum</p> 
</div> 

çok daha ileri küçültme Orada olacağım olacaktı nerede, yeniden adlandırma edilir; OP'nin tüm kaynakların html'ye dahil edildiğini göstermesi gerçeği göz önüne alındığında, bu durum trafik yükünde biraz tasarruf sağlayabilir.

Not: Herhangi bir Google arama sonuçları sayfasını incelerseniz, onların sınıf ve kimlik adları neredeyse hiç uzun 4 rastgele karakterden

Answer 8

http://prettydiff.com/ deneyin daha vardır göreceksiniz. Otomatik dil algılama özelliği sunar ve html, css ve javascript'i minimize edebilir. Bu araç, mim türü olmayan veya javascript ile ilgili bir mime türü olmayan komut dosyası etiketlerinin javascript içermesi veya hiçbir şey içermemesi gerektiğini varsayar. Benzer şekilde, bir mime türü olmayan veya "text/css" mime tipi olan stil etiketlerinin CSS içerdiği varsayılır. CSS ve JavaScript buna göre minimize edilir. Aracın kendisi javascript ile yazılmıştır. Birden fazla araç kullanmanız için bir sebep yok.

Answer 9

WebMarkupMin Online'u denemenizi öneririz.

WebMarkupMin Online, HTML, XHTML ve XML kodunuzu küçültmek için ücretsiz çevrimiçi araçlar. HTML ve XHTML minimize edicileri, script etiketlerinden, etkinlik öznitelikleri ve javascript: sözde protokolüne sahip köprülerden, style etiketlerinden ve özelliklerinden CSS kodunun minimize edilmesini ve JavaScript kodunun minimize edilmesini destekler.Bu minikerler, CSS minifikasyonunun çoklu algoritmalarını (Mads Kristensen'in Efficient stylesheet minifier, Microsoft Ajax CSS Minifier ve YUI CSS Compressor) ve JavaScript minifikasyonunu (Douglas Crockford'un JSMin, Microsoft Ajax JS Minifier ve YUI JS Compressor) desteklemektedir.

Bu araçlar, WebMarkupMin kitaplığına dayanmaktadır.