Bu makalemizde, Require.JS ile modüler olarak yazdığımız programlarımızı tek bir bütün dosya haline getirme, yorum satırlarını silme, indent/boşluk temizleme ve minimize etme gibi canlıya almadan önce yapılması gereken optimizasyon işlemlerine değineceğiz.

Bu serideki şimdiye kadar yaptığımız işlerle, kendimizi huni takmaktan kurtardık. Şimdi sıra kullanıcılarımıza geldi. Geçen makaledeki son yaptığımız örneği açıp Developer Tools ile Network diagramını incelersen, aşağıdaki gibi bir şekil ile karşılaşacaksın.




Gördüğün gibi, tarayıcı 8 kez sunucuya istekte bulunuyor. Üstelik sadece dört adet dosyamız var. Peki ya 89734023783296 adet dosyamız olduğunda ne olacak? Yaa, yazık değil mi adama (ya da kadına) ?

Neyse ki Require.JS bizim için zahmetsizce bu dosyaları tek bir bütün haline getiriyor ve gerekli diğer optimizasyonları yapıyor. Nasıl mı? Adım adım gidelim.

İlk olarak, optimizasyon işlemini yapacağımız bilgisayarımıza Node.JS'i kurmamız gerekiyor. Bunun için "Kurulum" makalesine bakabilirsin.

Not : Node.JS olmadan Java ve Rhino kullanarak da optimizasyonu çalıştırma ihtimalin var ama bir JavaScript Developer'ın makinesinde Node'un kurulu olmayacağını tahmin etmiyorum. Projeleri takip edeceksen, zaten Node'u kurman gerekecektir.

İkinci adım olarak, Require.JS'in resmi sitesine girip, öncelikle sol taraftaki "Download" linkine, ardından da sağ taraftaki "Download" butonuna tıklamamız gerekli.


Böylece "r.js" isminde bir dosyanın inmiş olması gerekiyor. Bir önceki makalemizdeki örneğin halen "RequireJSSample" adıyla masaüstünde durduğunu varsayıyorum. Şimdi masaüstüne "build" adında yeni bir klasör oluşturalım ve az önce indirdiğimiz "r.js" dosyasını bu klasör içerisine taşıyalım.

Son olarak aşağıdaki kodları "build" klasörü içerisine "build.js" adıyla kaydedelim.

{
    appDir: "../RequireJSSample/",
    baseUrl: "js/app",
    dir: "../publish",
    optimize: "uglify",
    mainConfigFile: "../RequireJSSample/js/app.js",
    removeCombined: true,
    modules: [
        {
            name: "../app"
        }
    ]
}

Son durumda masaüstünde bulunan dosya ve klasörlerin durumu aşağıdaki gibi olmalı.


İşlemi tamamlamadan önce, "build.js" dosyasının içerisine yazdıklarımızın ne anlama geldiğine hızlıca bir bakalım.
  • İlk satır, optimizasyona girecek uygulamamızın nerede bulunduğunu gösteriyor.
  • İkinci satır ise uygulamanın modüllerinin nerede durduğunu gösteriyor.
  • Üçüncü satır, optimize edilmiş çıktının nereye konulacağını söylüyor ki, burada masaüstünde "publish" isimli bir klasör oluşturulmasını söyledik.
  • Dördüncü satır, optimizasyonda kullanılacak yöntemi söylüyor. Uglfy, sadece indent/boşlukları ve yorum satırlarını silmeyip, aynı zamanda değişken isimlerini, mantıksal ve matematiksel ifadeleri de kısaltan, oldukça becerikli bir kütüphanedir.
  • Beşinci satır, Require.JS'in konfigürasyon dosyasının nerede olduğunu gösteriyor.
  • Altıncı satır, geride kalan dosyaların silinmesini sağlıyor.
  • Son satırlar grubu ise optimize edilecek modülleri veriyor ki, biz burada tüm programımızı verdik.
Geldik son noktaya. Artık optimizasyonu başlatmanın zamanı geldi. Terminal (Linux veya Mac OS) veya command prompt (Windows) ile masaüstündeki build klasörün içerisine girelim ve aşağıdaki komutu çalıştıralım.

node rs.js -o build.js

Bunu çalıştırdıktan sonra aşağıdaki gibi bir ekran görüntüsünün karşına çıkması gerekiyor.


Burada görüyoruz ki, CDN'den referans verdiğimiz JQuery optimizasyona girmemiş. Geri kalan tüm dosyalar da "app.js" dosyasında toplanmış. Bu noktada masaüstünde bulunan dosya ve klasörlerin durumu aşağıdaki gibi olmalı.


Gördüğün gibi optimizasyon sonrasında "publish" isimli bir klasör oluşturuldu ve içerisine sadece "sayfa.html" belgesi, "require.js" ve yazdığımız tüm kodların birleştirilmiş hali olan "app.js" dosyası konuldu. Buradaki işlem özetini içeren "build.txt" dosyası silinebilir.

Eğer ki "app.js" dosyasının içeriğini açarsak, aşağıdaki gibi bir manzara ile karşılaşırız.


Dikkat : Optimize edilmiş kod Debug etmek için uygun değildir. Uglyf kodu öyle bir hale getirir ki, sen bile "Bunu ben mi yazdım?" dersin. Bu yüzden alfa testlerde optimize edilmemiş kod üzerinden çalışmak daha mantıklı olabilir.

Programın hazır optimize edilmiş halini görmek istersen buraya tıklayabilirsin. Aşağıdaki gibi bir görüntü ile karşılaşmış olman gerekiyor.


Developer Tools ile Network diagramına baktığında da aşağıdaki gibi bir manzara ile karşılaşırsın. Üstelik burada indirilen dosya sayısı, artık yazdığımız programın büyüklüğüne göre de değişmeyecektir.


Makalemizi noktalarken öğrendiklerimizi özetleyelim.
  • Require.JS ile modüler olarak yazdığımız  programlarımızı zahmetsizce optimize edebiliriz.
  • Optimizasyon için Node.JS ve Require.JS resmi sitesinden indireceğimiz "r.js" dosyasına ihtiyacımız vardır.
  • Optimizasyon işleminin neleri kapsayacağını ve hangi yöntemleri kullanacağını, optimizasyon konfigürasyon dosyasında belirtiriz.
  • Optimize edilmiş kod Debug etmek için uygun değildir. Bu yüzden alfa testlerde optimize edilmemiş kod üzerinden çalışmak daha mantıklı olabilir.


Geri
CDN Kullanımı
İleri
Bu en son makaledir

Yorum Gönder

 
Top