Webpack İpuçları #1: Bundle Analyzer ile Bundle Dosyalarını Analiz Etmek
Girizgah
Geliştirdiğimiz Front-End projelerinde Webpack veya muadili bundler araçlarını sıklıkla kullanıyoruz. Bu araçlar ismiyle müsemma olarak projelerimiz içerisindeki dosyaları ve modülleri bir araya toplarken ekosistemlerindeki yüzlerce eklenti marifetiyle bundle operasyonu sırasında türlü manipülasyonları (dosyaları optimize etmek, tarayıcı uyumluluğu eklemek, kullanılmayan kodları temizlemek vs. gibi) yapabilmemize imkân sağlıyorlar.
Bundler araçlarını bu açıdan bir üretim bandının son adımı gibi düşünebiliriz. Projeler içerisindeki modüller sırayla bundler’ın önüne geliyor. O da daha önceden belirlenmiş kuralları gözeterek parçaları bir araya getiriyor ve günün sonunda nihai çıktıyı üretiyor. Buradaki kilit noktalardan birisi, bundler araçlarının projenin tamamı hakkında bilgi sahibi olması. Bu sayede geliştiricilere birçok kapı aralanmış oluyor.
Motivasyon
Projeler büyüdükçe içerisinde kullandığımız modül ve üçüncü parti kütüphaneler de giderek artıyor. Her ne kadar production (canlı) ortam için optimizasyonlar yapıyor olsak da bundle dosyalarının boyutlarının artması zamanla kaçınılmaz oluyor. Bu da son kullanıcı tarafında yükleme sürelerinin artmasına ve beraberinde keyifsiz deneyimlere sebep oluyor.
Bunun önüne geçmek için bundle dosyalarını izlemek, gerekiyorsa chunk (yığın) dosyalarını daha fazla ayrıştırmak ve dinamik import gibi yükleme alternatiflerini değerlendirmemiz gerekiyor. Bu durumda hangi bundle dosyasının hangi modülleri içerdiği, o modüllerin boyutları, proje içerisinde kaç farklı bundle dosyasında yer aldıkları gibi bilgiler mühim hâle geliyor. Ne yazık ki bu bilgileri bundle dosyalarından elle ayıklamak mümkün değil. Fakat yukarıda bahsettiğim gibi bundler araçları bu bilgilere zaten haizler.
Webpack ile Modül Bundle Etmek
Hemen ufak bir örnek yapmak için yeni bir proje oluşturalım.
React vb. bir kütüphane veya framework kullandığımızda gereken bundler yapılandırmaları hâlihazırda geliyor. Fakat biz örneği framework ve boilerplate aracından bağımsız olarak yapalım.
Webpack ve Webpack CLI paketlerini kuralım.
Webpack yapılandırma dosyasını oluşturalım.
Yapılandırma dosyasında src dizini altındaki index.js dosyasının bundle edileceğini ve bundle çıktısının dist dizini altındaki bundle.js dosyasına verileceğini belirtelim.
Production ortam için build alırken kullanacağımız NPM script’ini package.json içerisinde tanımlayalım.
Akabinde projede kullanacağımız birkaç tane üçüncü parti kütüphaneyi yükleyelim.
Webpack yapılandırmasında belirttiğimiz index.js dosyasını oluşturalım ve kurduğumuz kütüphaneleri import edelim.
Oluşturduğumuz script ile production ortam için build alalım.
Build sonrasında elimizde 30KB boyutunda bir bundle.js dosyası oluşacaktır. Bu dosyayı kullanmak istediğimiz HTML sayfasına doğrudan ekleyebiliriz. Fakat yukarıda bahsi geçen analizi nasıl yapacağız?
Webpack Bundle Analyzer ile Analiz ve Görselleştirme
Webpack’in oldukça kullanışlı ve topluluk tarafından da epey ilgi gören eklentilerinden birisi webpack-bundle-analyzer. Yazıyı yazdığım an itibarıyla haftalık 4 milyondan fazla indirilmeye sahip ve GitHub reposunun da 11 binin üzerinde yıldızı var. Webpack Bundle Analyzer, bundle dosyalarıyla ilgili yukarıda sorduğumuz soruların tamamını görselleştirerek cevaplıyor.
Hemen, tıpkı Webpack gibi bir geliştirme ortamı bağımlılığı olarak kuralım eklentiyi.
En temel kullanım için Webpack yapılandırma dosyasını güncelleyelim.
Akabinde npm run build ile production ortam için build aldıktan hemen sonra 127.0.0.1:8888 adresinde yayın yapan aşağıdaki gibi bir web arayüzü bizi karşılayacak.
Görüleceği üzere bu arayüz, sayfadaki tüm bağımlılıkları boyutlarına göre renklendirerek ve konumlandırarak görselleştiriyor. NPM mimarisinde paketler farklı birçok pakete bağımlı olduğundan herhangi birine tıkladığımızda o paketin bağımlı olduğu alt paketleri de görebiliyoruz. Paketlerin boyutlarına göre sıralamaları, konumları, sıkıştırılmadan önceki ve sonraki boyutları gibi bilgileri alabiliyoruz.
Webpack Bundle Analyzer API
Webpack Bundle Analyzer’ın yine basit ve kullanışlı bir API’ı mevcut. Pratikte analizin yapılacağı konuma göre kimi ayarlamalar yapmak gerekebiliyor.
analyzerMode
Örnek vermek gerekirse yukarıdaki kullanım bir CI/CD pipeline üzerinde doğru çalışmayacaktır. 127.0.0.1:8888 üzerinde yayın yapan sayfa sürekli açık kalacağından pipeline sonlanmayacaktır. Bunun için analizin web sunucusu içerisinde çalıştırılması yerine HTML veya JSON olarak saklanmasını sağlanabilmekte. Varsayılan olarak web sunucusu açacaktır.
analyzerHost ve analyzerPort
analyzerMod olarak server seçildiğinde olası bir çakışmayı engellemek adına web sunucusunun açılacağı host ve port bilgileri değiştirilebilmektedir.
openAnalyzer
openAnalyzer değeri ile build sonrasında analizin otomatik olarak başlatılması aktif veya pasif edilebilir. Varsayılan olarak otomatik olarak analiz başlayacaktır.
Yapılandırma seçeneklerinin tamamına buradan erişilebilir.
Sonuç
Webpack Bundle Analyzer, bundle dosyalarını monitör etmek için pratik bir Webpack eklentisi. Ben bir projede yaptığım import hatasını fark etmeyip production ortama kullanıcı deneyimini doğrudan etkileyecek büyüklükte bundle dosyaları çıkardığımda kullanmaya başlamıştım. Böyle keyifsiz deneyimler yaşamamak adına olabildiğince otomatize ederek geliştirme ortamına dahil etmek fayda sağlayacaktır.
Kaynaklar
https://webpack.js.org/concepts/entry-points
https://github.com/webpack-contrib/webpack-bundle-analyzer
Webpack serisindeki bir sonraki yazı: Webpack İpuçları #2: Speed Measure ile Build Sürelerini Ölçmek
