Lazy Load Script — Angular

Bu makalemde component açıldıktan sonra nasıl bir js yüklenir bunu anlatacağım. Neden böyle bir şeye ihtiyaç duyulur onu anlatayım öncelikle:
Karşıma çıkan durumdan bunu açıklamak istiyorum. Bir responsive carousel yapmam gerekiyordu. Kısa bir vakitte bunu yazmak zor. Ben de third party bir paket aramaya başladım ve ihtiyacım olan aslında tam olarak “slick-carousel” paketiydi. Fakat jquery ile çalıştığı için hem slick.js hem de jquery.js yüklemem gerekiyordu. Tek bir componentte bu js paketleri kullanılacağı için bu paketleri projemizin açılışına ekleyemeyiz. Çünkü yük olacaktır ve dolasıyla performans kaybına yol açacaktır açılışta. Fazla uzatmadan kodu inceleyelim.

Kısaca servisi özetleyeyim;

loadScript fonksiyonu bir url alıyor. Bu url örnek olarak http://code.jquery.com/jquery-3.3.1.min.js olacağı gibi, /assets/jqery.min.js assets klosörü içerisi de olabilir. Script tagi oluşturuyor ve gönderdiğiniz url’i script src olarak basıyor. Script yüklendiğinde ise body içerisine scripti gömüyor. Sonra da observable olarak dönüyor.
Bu fonksiyona subscribe olduğunuzda, cevap geldiğinde scriptiniz yüklenmiş oluyor.

Yukarıda sadece jquery yükleyerek ve çalıştırarak örnekledim. Unutmayın $ sembolünü kullanabilmek için aşağıdaki tanımı yapmak zorundasınız. Yoksa typescript $bu nedir böyle bir şey yok diye kabul etmeyecektir.

declare var $;

Bir sonraki makalemde slick.js ile carousel yapımını anlatmayı planlıyorum. Sağlıcakla kalın, yeniden görüşmek üzere…