6 Açısal Performans Ayarlama İpuçları ve Püf Noktaları

Angular, web uygulamaları oluşturmak için güçlü bir JavaScript çerçevesidir, ancak uygulamanız büyüdükçe yavaşlayabilir ve yönetimi zorlaşabilir. Açısal performans ayarı , Angular uygulamanızın sorunsuz ve verimli çalışmasını sağlamanın önemli bir parçasıdır.

Bu makalede, yükleme süresini iyileştirme, uygulamanızın boyutunu küçültme ve gereksiz DOM güncellemelerinin sayısını azaltma teknikleri dahil olmak üzere Angular uygulamanızın performansını optimize etmeye yönelik bazı ipuçlarını ve püf noktalarını keşfedeceğiz. İster deneyimli bir Angular geliştiricisi olun, ister yeni başlıyor olun, bu ipuçları ve püf noktaları, uygulamanızın performansını artırmanıza ve kullanıcılarınız için sorunsuz çalışmasını sağlamanıza yardımcı olacaktır.

Öyleyse, kolay açısal uygulama performansı ayarı için birincil tekniklerle başlayalım.

Açısal Performans Ayarı İçin İpuçları

Açısal uygulamanızın performansını kolayca artırabileceğiniz çeşitli ipuçları vardır. Ancak, sizin için en iyi altı açısal uygulama optimizasyonu ipucunu seçtik. İşte buradalar:

• AoT Derlemesini Kullanma
• OnPush Değişiklik Algılama Stratejisini Kullanma
• Saf borular kullanın
• TrackBy'yi ngFor'da kullanma
• Kod Bölme
• Sayfa yükünü iyileştirme

Her biri hakkında ayrıntılı olarak öğrenelim.

AoT Derlemesini Kullanma

Açısal uygulamanızın performansını artırmak için önemli bir ipucu, Zamanında (AoT) derlemeyi kullanmaktır. AoT, Angular bileşenlerinizi ve şablonlarınızı çalışma zamanında derlemek yerine derleme zamanında önceden derleyen bir tekniktir. Uygulama ilk yüklendiğinde tarayıcının şablonları ve bileşenleri derlemek için zaman harcamasına gerek kalmadığından, bu, uygulamanızın yükleme süresini önemli ölçüde artırabilir.

AoT, şablonları ve bileşen fabrikalarını JavaScript kodunda satır içine alarak uygulamanızın boyutunu küçültmenize de yardımcı olur. Bu, uygulamayı yüklemek için gereken ağ isteklerinin sayısını azaltır ve uygulamanın genel boyutunu azaltır, bu da yükleme süresinin iyileştirilmesine yardımcı olabilir.

Angular uygulamanızda AoT derlemesini etkinleştirmek için, uygulamanızı “–aot” bayrağıyla oluşturmak üzere Angular CLI kullanmanız gerekir. Bu, uygulamanız için AoT derlemesini etkinleştirecek ve ortaya çıkan yapı, performans için optimize edilecektir. Ek olarak, Angular CLI'nin AoT derlemesi için kullandığı komut satırı aracı olan "ngc" derleyicisi gibi araçları doğrudan kullanabilirsiniz.

OnPush Değişiklik Algılama Stratejisini Kullanın

OnPush değişiklik algılama stratejisi, yalnızca bir giriş özelliği değiştiğinde veya bir olay yayınlandığında bir bileşendeki değişiklikleri kontrol ederek Angular uygulamasının performansını iyileştirmenin bir yoludur. Bu, her değişiklik algılama döngüsü olduğunda bir bileşendeki ve onun tüm alt bileşenlerindeki değişiklikleri kontrol eden varsayılan "OnPush" stratejisine zıttır.

OnPush stratejisini kullanmak için, ChangeDetectorRef modülünü içe aktarmanız ve bileşeninizin @Component dekoratörünün changeDetection özelliğini ChangeDetectionStrategy.OnPush olarak ayarlamanız gerekir.

OnPush, uygulamanızın performansını artırabilecek güçlü bir stratejidir, ancak aynı zamanda onu daha karmaşık hale de getirebilir. Beklendiği gibi çalıştığından emin olmak için bu stratejiyi uyguladıktan sonra uygulamanızı kapsamlı bir şekilde test ettiğinizden emin olun.

Saf borular kullanın

Angular'da saf bir boru, yalnızca giriş değerinde veya boruya iletilen parametrelerde bir değişiklik olduğunda çalışan bir borudur. Bu, bir borunun çalıştırılma sayısını azalttığı için Açısal bir uygulamanın performansını artırabilir.

Angular'da saf bir boru oluşturmak için borunuzun @Pipe dekoratörüne pure: true özelliğini eklemeniz gerekir.

Saf bir kanal oluşturduğunuzda, Angular'ın boruyu yalnızca kanala iletilen giriş değeri veya parametreler değiştiğinde yeniden çalıştıracağına dikkat etmek önemlidir. Kanal, girdi olarak iletilmeyen başka verilere veya duruma bağlıysa, kanal doğru çıktıyı üretmeyebilir.

Ayrıca, OnPush değişiklik algılama stratejisini kullanan bir bileşenin içinde saf bir boru varsa, boruyu yalnızca bir Girdi veya bir olay yayıldığında yürütür ve bu da uygulamanızın performansını daha da artırabilir.

Karmaşık bir işleve sahip saf bir kanal kullanıyorsanız, giriş değeri değişene kadar kanal yürütülmeyeceğinden, bunun uygulamanızın performansı üzerinde olumsuz bir etkisi olabileceğini unutmayın. Bu gibi durumlarda saf olmayan boruları kullanmak daha iyidir.

TrackBy'yi ngFor'da kullanma

trackBy, Angular'da bir ngFor döngüsündeki her öğe için benzersiz bir tanımlayıcı belirlemenizi sağlayan bir özelliktir. Bu, koleksiyon değiştiğinde oluşturulması ve yok edilmesi gereken DOM öğelerinin sayısını azaltarak bir Angular uygulamasının performansını artırabilir.

trackBy'yi bir ngFor döngüsünde kullanmak için, trackBy özniteliğinin değeri olarak bir işlev iletmeniz gerekir. İşlev, geçerli öğenin dizinini ve öğenin kendisini almalı ve bu öğe için benzersiz bir tanımlayıcı döndürmelidir.

<div *ngFor=”öğelerin öğesi olsun; trackBy: trackByFn”>{{ item.name }}</div>

trackByFn(dizin: sayı, öğe: herhangi biri) {

iade item.id;

}

Bu örnekte, trackByFn işlevi, id özelliği olarak her öğenin benzersiz tanımlayıcısını döndürüyor.

Kod Bölme

Kod bölme, uygulamanın ilk yükleme süresini azaltarak Angular uygulamalarının performansını artırmak için kullanılan bir tekniktir. Uygulamanın kodunu, kullanıcı uygulamada gezinirken talep üzerine yüklenebilecek daha küçük, daha yönetilebilir parçalara bölmeyi içerir.

Bu, uygulamanın tüm kodu bir kerede yüklemek yerine yalnızca geçerli sayfa için gerekli olan kodu yüklemesine izin vererek uygulamanın ilk yükleme süresini önemli ölçüde artırabilir. Bu teknik, Angular Router modülü ve loadChildren özelliği kullanılarak uygulanabilir.

Sayfa yükünü iyileştirme

Bir Angular uygulamasının sayfa yükünü iyileştirmenin birkaç yolu vardır ve bunlardan bazıları şunlardır:

1. Kod bölme: Daha önce belirtildiği gibi, kod bölme, uygulamanın kodunu talep üzerine yüklenebilecek daha küçük parçalara ayırmayı içeren bir tekniktir. Bu, uygulamanın ilk yükleme süresini önemli ölçüde artırabilir.
2. Tembel yükleme: Yavaş yükleme, modüllerin yalnızca ihtiyaç duyulduğunda yüklenmesini içeren bir tekniktir. Bu aynı zamanda ilk yüklemede yüklenmesi gereken kod miktarını azaltarak uygulamanın ilk yükleme süresini iyileştirmeye yardımcı olabilir.
3. Görüntüleri optimize etme: Görüntüleri sıkıştırarak ve uygun görüntü biçimini kullanarak optimize etmek, indirilmesi gereken görüntülerin boyutunu azaltarak sayfa yükünü iyileştirmeye de yardımcı olabilir.
4. Tarayıcı önbelleğe almanın kullanımı: Tarayıcı önbelleğini etkinleştirmek, tarayıcının kaynakları yerel olarak depolamasına izin vererek sayfa yüklemesinin iyileştirilmesine de yardımcı olabilir, böylece kaynakların tekrar indirilmesi gerekmez.

Son sözler

Sonuç olarak Angular, karmaşık, yüksek performanslı web uygulamaları oluşturmak için kullanılabilecek güçlü ve çok yönlü bir çerçevedir. Ancak, herhangi bir çerçevede olduğu gibi, bir Angular uygulamasının performansını optimize etmek için kullanılabilecek bazı en iyi uygulamalar ve teknikler vardır. Geliştiriciler, kod bölme, yavaş yükleme vb. teknikleri kullanarak Angular uygulamalarının yükleme süresini ve genel performansını önemli ölçüde iyileştirebilir.

Popüler bir BT hizmetleri dış kaynak şirketi olan Smarsh Infotech, gelecekteki uygulama geliştirme ortağınız olabilir. İşinizi dijital platformlarda geliştirmeyi planlıyorsanız, size elimizden gelen her şekilde yardımcı olabiliriz. Proje fikirlerinizi birleştirelim ve tartışalım.

Ayrıca Okuyun: Yeni Açısal 14: Bununla ilgili her şeyi okuyun