Minification, uygulamalarımız development sürecinden çıkıp yayına girince ilk ihtiyaç duyduğumuz konulardan biridir. Teknik açıklamasını burada yapmam çok uzun olacağı ve konuyu böleceği için, neden Minification sorusunun cevabını https://en.wikipedia.org/wiki/Minification_(programming) adresinden alabilirsiniz.

AngularJS uygulamalarınızda modüllerinizi oluştururken de Minify edilebilir şekilde yazmanız çok önemli. Çünkü ileride çok başınızı ağrıtabilecek süreçlerle karşı karşıya kalabilirsiniz.

“Uygulamamın Minification’ a Hazır olması için ne yapmalıyım?

Aşağıda aynı işi yapan iki kod parçası var. Fakat birini Minify edemiyorsunuz. Daha doğrusu Minify ettikten sonra çalışmaz hale geliyor. İki kod parçasını da inceleyin. Hangisinin Minify olduktan sonra çalışmayacağının cevabı yine aşağıda sizi bekliyor 🙂

Kod 1;

Kod 2;

1.kod Minify’ dan sonra ÇALIŞMAYACAKTIR!

İki kod arasındaki tek fark şudur; https://docs.angularjs.org/guide/di#inline-array-annotation adresinde inline array annotation başlığını incelerseniz, controller’ ımızda kullandığımız dependency lerin array içinde annotate edilmesinin TAVSİYE EDİLDİĞİNİ görebilirsiniz.

1.kod’ u minify ettiğimizde karşımıza aşağıdaki sonuç çıkıyor;

Görüldüğü üzere function içindeki $scope değişkeni, e isminde bir değişken olmuş. PEKİ ANGULARJS FRAMEWORK’ Ü BUNUN $SCOPE DEĞİŞKENİ OLDUĞUNU NASIL BİLSİN ?

Hiç bilemez.

Lakin 2.kod’ u minify ettiğimizde aşağıdaki sonucu alıyoruz ve kodumuz çalışıyor

Görebileceğiniz gibi, $scope değişkeni inline array annotation içinde hiç bozulmadan kalmış. function içindeki $scope değişkeni ise a isminde bir değişken olmuş. AngularJS çalışma sırasında, inline array annotation dan function içinde değişkene, tanımlama sırasına göre referans alacağı için herşey yolunda gidecektir. Works well 🙂

 

“Peki ben bir hata yaptım ve inline array annotation kullanmadım, beni nasıl kurtarmayı düşünüyorsun?”

Çözüm 1;

Kodunuzda heryeri oturup elle düzeltmek 🙂 Tabi projeniz büyük ise bu size büyük iş yükü çıkartabilir.

Çözüm 2;

https://github.com/Kagami/gulp-ng-annotate kullanarak, otomatik olarak bu işlemi bilgisayarınıza yaptırmak 🙂

ng-annotate’ in nasıl kullanılabileceğini github sayfasından kolaylıkla öğrenebilirsiniz. Özellikle önceden gulp kullandıysanız. Bu konuya burda çok fazla girmeyi düşünmüyorum. Çünkü AngularJS minification adında, başlı başına bir makele yazmayı düşünüyorum. Lakin siz bu süreçte aşağıdaki videolardan da yardım alabilirsiniz.

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir