SharePoint'te küçültme ve paketleme
Bu makalede, HTTP isteklerinin sayısını azaltmak ve SharePoint'te sayfaları yüklemek için gereken süreyi azaltmak için Web Essentials ile küçültme ve paketleme tekniklerinin nasıl kullanılacağı açıklanmaktadır.
Web sitenizi özelleştirdiğinizde, özelleştirmeyi desteklemek için sunucuya çok sayıda ek dosya ekleyebilirsiniz. Ek JavaScript, CSS ve görüntülerin eklenmesi, sunucuya yapılan HTTP isteklerinin sayısını artırır ve bu da bir web sayfasının görüntülenmesi için gereken süreyi artırır. Aynı türde birden çok dosyanız varsa, bu dosyaları daha hızlı indirmek için bu dosyaları paketleyebilirsiniz.
JavaScript ve CSS dosyaları için, boşluk ve gerekli olmayan diğer karakterleri kaldırarak dosyaların toplam boyutunu azalttığınız küçültme adlı bir yaklaşım da kullanabilirsiniz.
Web Essentials ile JavaScript ve CSS dosyalarını küçültme ve paketleme
CSS ve JavaScript dosyalarını paketlemek için Web Essentials gibi üçüncü taraf yazılımları kullanabilirsiniz.
Önemli
Web Essentials üçüncü taraf, açık kaynak, topluluk tabanlı bir projedir. Yazılım, Visual Studio 2012 ve Visual Studio 2013 bir uzantısıdır ve Microsoft tarafından desteklenmez. Web Essentials indirmek için Web Essentials 2012'deki web sitesini ziyaret edin.
Web Essentials iki tür paketleme sunar:
- .bundle: CSS ve JavaScript dosyaları için
- .sprite: görüntüler için (yalnızca Visual Studio 2013)
Web Essentials, özel bir ana sayfada başvuruda bulunan bazı marka öğeleriyle mevcut bir özelliğiniz varsa kullanabilirsiniz, örneğin:
Web Essentials'de TE000127218 ve CSS paketi oluşturmak için
Visual Studio'da, Çözüm Gezgini paketine eklemek istediğiniz dosyaları seçin.
Seçili dosyalara sağ tıklayın ve bağlam menüsünden Web Essentials>İçerik Oluşturucu JavaScript paket dosyasını seçin. Örneğin:
JavaScript ve CSS dosyalarını paketlemenin sonuçlarını görüntüleme
JavaScript ve CSS paketi oluşturduğunuzda, Web Essentials JavaScript ve CSS dosyalarının yanı sıra diğer bazı yapılandırma bilgilerini tanımlayan tarif dosyası olarak adlandırılan bir XML dosyası oluşturur:
Ayrıca paketleme tarifinde küçültme bayrağı true olarak ayarlanırsa dosyaların boyutu küçültülmüş ve birlikte paketlenmiştir. Bu, ana sayfanızda başvurabileceğiniz JavaScript dosyalarının yeni, küçültüldü sürümlerinin oluşturulduğu anlamına gelir.
Web sitenizden bir sayfa yüklediğinizde, sunucuya gönderilen istek sayısını ve her dosyanın yüklenmesinin ne kadar sürdüğünü görmek için web tarayıcınızdan Internet Explorer 11 gibi geliştirici araçlarını kullanabilirsiniz.
Aşağıdaki şekil, küçültmeden önce JavaScript ve CSS dosyalarının yüklenmesinin sonucudur.
CSS ve JavaScript dosyalarını birlikte birleştirdikten sonra, istek sayısı 74'e düştü ve her dosya özgün dosyaların tek tek indirilmesinden yalnızca biraz daha uzun sürdü:
Paketleme sonrasında JavaScript paket dosyası önemli ölçüde 815 KB'tan 365 KB'a düşürüldü:
Görüntü sprite oluşturarak görüntüleri paketleme
JavaScript ve CSS dosyalarını nasıl paketlediğinize benzer şekilde, birçok küçük simgeyi ve diğer yaygın görüntüleri daha büyük bir sprite sayfasında birleştirebilir ve ardından CSS'yi kullanarak tek tek görüntüleri ortaya çıkarabilirsiniz. Kullanıcının web tarayıcısı, her görüntüyü tek tek indirmek yerine sprite sayfasını bir kez indirir ve ardından yerel bilgisayarda önbelleğe alır. Bu, indirme sayısını ve web sunucusuna gidiş dönüş sayısını azaltarak sayfa yükleme performansını artırır.
Web Essentials** içinde görüntü sprite'i oluşturmak için
Visual Studio'da, Çözüm Gezgini paketine eklemek istediğiniz dosyaları seçin.
Seçili dosyalara sağ tıklayın ve bağlam menüsünden Web Essentials>İçerik Oluşturucu resim sprite öğesini seçin. Örneğin:
Sprite dosyasını kaydetmek için bir konum seçin. .sprite dosyası, sprite içindeki ayarları ve dosyaları açıklayan bir XML dosyasıdır. Aşağıdaki şekiller, bir sprite PNG dosyasının ve buna karşılık gelen .sprite XML dosyasının bir örneğini gösterir.
