Webpack İpuçları #3: Terser Plugin ile Canlı Ortama Çıkarken Konsol Loglarını Temizlemek
Webpack serisindeki bir önceki yazı: Webpack İpuçları #2: Speed Measure ile Build Sürelerini Ölçmek
Motivasyon
İster tarayıcı üzerinde ister Node.js üzerinde çalışırken olsun, JavaScript geliştiriciler olarak console objesinin bize sağladığıconsole.log() ve benzeri metotları sıklıkla kullanıyoruz. Ekseriyetle debug amaçlı olan bu kullanımlarımız, gündelik hayatta işimizi epey kolaylaştırıyor. Fakat bir dezavantajı var, unutmak. Ameliyat esnasında hastanın karnında unutulan makas örneğinde olduğu gibi proje içerisinde unuttuğumuz logları canlı ortama çıktıktan sonra fark etmek pek iyi hissettirmiyor.
İçeriğine dikkat etmeden hızlıca yazdığımız loglar bizi kimi zaman gülünç duruma düşürürken kimi zaman da projeye dair hassas veya iş bilgisi içeren verileri faş etmemize neden oluyor. Elbette bunun birincil ve daha iyi bir pratik olan çözümü, kod incelemeleri esnasında istenmeyen logların tespit edilip canlıya çıkacak dala kabul edilmemesi olacaktır. Fakat bu yöntem de yine günün sonunda insana bağımlı olduğundan gözden kaçma ihtimali hâlâ sürüyor.
Terser Webpack Plugin
Bilindiği üzere Webpack bir module bundler (paketleyici). Proje içerisindeki yapılandırması doğru yapıldığında kullanılan tüm modüller Webpack’in elinden geçmiş oluyor. Bu sayede eklentiler aracılığıyla kodumuz üzerinde türlü manipülasyonları (ES5 dönüşümleri vb.) ve elemeleri (kullanılmayan kodları temizlemek vb.) kolayca yapabiliyor.
Webpack’in Terser isimli eklentisi yukarıda bahsettiğim derdi çözmede bize yardımcı oluyor. Tek marifeti bu değil elbette. Genel hatlarıyla, bundle dosyaları oluşturulurken optimizasyon ve performans odaklı, kullanılmayan kodları temizlemek, sınıf ve metot isimlerini kısaltmak, yorumları temizlemek gibi seçenekler sunuyor.
Kullanım
Projede Webpack’in kurulu ve yapılandırılmış olduğunu varsayıyorum. Bu durumda terser-webpack-plugin isimli NPM paketini kurmamız yeterli olacaktır.
Paketi kurduktan sonra Webpack yapılandırma dosyamızdaki optimization objesinde Terser eklentisini tanımlıyoruz. compress objesinde ise bundle dosyalarımız sıkıştırılırken yapabileceğimiz manipülasyonları belirtiyoruz.
drop_console
Kullanabileceğimiz ilk yöntem drop_console. Varsayılan değeri false. Değerini true olarak tanımladığımız takdirde proje içerisindeki tüm console metotları (console.warn(), console.error() vs. dâhil) canlı ortam için oluşturulan bundle dosyalarında yer almayacaktır.
pure_funcs
Üstteki yöntemin dezavantajı, console.log() haricindeki diğer console metotlarına gerçekten canlı ortamda ihtiyacımız olabilir. Belli senaryolarda tarayıcı konsoluna uyarı veya hata mesajları yazdırıyor ve sonrasında bunlara başvuruyor olabiliriz. O durumda da pure_funcs dizisini kullanarak yalnızca göz ardı etmek istediğiniz metotların isimlerini belirtebiliriz. Aşağıdaki kullanımda console.warn() gibi diğer metotlar çalışmaya devam edecektir.
Üstteki yapılandırmalarla kullanılan Terser eklentisi Webpack’in yalnızca production modunda çalışır. development moddaki bundle dosyalarına herhangi bir müdahalede bulunmaz.
Sonuç
Bunun gibi elle yapılan gündelik ve dikkat gerektiren işleri araçlara devretmek bir dilemmaya neden oluyor aslında. Evet, günün sonunda hataya olan toleransı sıfıra indirmiş oluyoruz ama kod inceleme gibi süreçler, araçlara güvenilerek terk edildiğinde canlı ortam istediğimiz gibi oluyor olmasına belki ama geliştirme ortamı zamanla içler acısı bir hâl alabiliyor. O nedenle bu gibi yöntemleri birincil çözüm olarak değil son adımdaki bir önlem olarak düşünmekte fayda var.
Kaynaklar
Webpack serisindeki bir sonraki yazı: Webpack İpuçları #4: Content Hash ile Bundle Dosyalarının Tarayıcı Önbelleğinde Kalmasını Önlemek
