Angular Uygulama Paket Boyutlarını webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme

Angular Uygulama Paket Boyutlarını webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme

Angular uygulamaları, modern web geliştirmenin temel taşlarından biridir. Güçlü yapısı, geniş ekosistemi ve performans odaklı mimarisi sayesinde karmaşık tek sayfa uygulamaları (SPA) geliştirmek için tercih edilir. Ancak, bir uygulamanın boyutu arttıkça, son kullanıcı deneyimi üzerinde olumsuz etkiler yaratabilecek “paket boyutu” (bundle size) sorunu ortaya çıkabilir. Büyük paket boyutları, uygulamanın yüklenme süresini uzatır, mobil veri kullanımını artırır ve genel performansı düşürür. Bu nedenle, Angular uygulamalarınızın paket boyutunu anlamak, analiz etmek ve optimize etmek, başarılı bir ürün geliştirmenin kritik bir parçasıdır.

Bu makalede, Angular uygulamalarınızın üretim derlemesi (production build) sonrası oluşan JavaScript paketlerinin boyutunu detaylı bir şekilde incelemek için iki güçlü aracı ele alacağız: webpack Bundle Analyzer ve source-map-explorer. Bu araçlar, uygulamanızın hangi kısımlarının pakette ne kadar yer kapladığını görselleştirmemize ve bu bilgiyi kullanarak optimizasyon stratejileri geliştirmemize olanak tanır. Her iki aracın kurulumunu, kullanımını, elde edilen verilerin nasıl yorumlanacağını ve paket boyutunu azaltmaya yönelik pratik stratejileri adım adım açıklayacağız.

Neden Paket Boyutu Önemlidir?

Uygulamanızın paket boyutunu küçültmek, sadece bir optimizasyon görevi değil, aynı zamanda kullanıcı deneyimi, SEO ve operasyonel maliyetler açısından da doğrudan etkiye sahip stratejik bir karardır.

Sayfa Yükleme Süresi ve Kullanıcı Deneyimi

Web uygulamaları için ilk izlenim çok önemlidir. Bir kullanıcı, bir web sitesini ziyaret ettiğinde, sayfanın hızlı bir şekilde yüklenmesini bekler. Büyük JavaScript paketleri, tarayıcının bu dosyaları indirmesi, ayrıştırması (parsing) ve çalıştırması için daha fazla zaman harcamasına neden olur. Bu da sayfa yükleme süresini uzatır. Uzun yükleme süreleri, kullanıcıların sabırsızlanmasına ve uygulamayı terk etmesine yol açabilir. Araştırmalar, sayfa yükleme süresindeki her saniyelik artışın dönüşüm oranlarında önemli düşüşlere neden olduğunu göstermektedir. Hızlı yüklenen bir uygulama, kullanıcıların daha memnun olmasını, daha uzun süre kalmasını ve uygulamayı tekrar ziyaret etmesini sağlar.

SEO Etkileri

Arama motorları, web sitelerini sıralarken sayfa yükleme hızını önemli bir faktör olarak değerlendirir. Google gibi arama motorları, kullanıcı deneyimini iyileştirmek amacıyla hızlı yüklenen sitelere öncelik verir. Yavaş yüklenen bir Angular uygulaması, arama motoru sıralamalarında dezavantajlı duruma düşebilir, bu da organik trafik kaybına neden olabilir. Paket boyutunu optimize etmek, uygulamanızın SEO performansını doğrudan iyileştirerek daha fazla görünürlük kazanmasına yardımcı olur.

Mobil Cihazlarda Performans

Mobil cihaz kullanıcıları, genellikle daha yavaş internet bağlantılarına ve daha sınırlı işlem gücüne sahiptir. Büyük paket boyutları, mobil cihazlarda uygulamanın daha da yavaş yüklenmesine ve çalışmasına neden olabilir. Bu durum, özellikle gelişmekte olan ülkelerdeki kullanıcılar için daha da kritik hale gelir. Mobil cihazlar için optimize edilmiş paket boyutları, daha geniş bir kitleye ulaşmanızı ve mobil kullanıcı deneyimini önemli ölçüde iyileştirmenizi sağlar.

Veri Tüketimi

Mobil veri planları sınırlı olabilir. Büyük JavaScript paketleri, kullanıcıların mobil veri kotalarını daha hızlı tüketmelerine neden olur. Bu durum, kullanıcılar için ek maliyet anlamına gelebilir ve uygulamanızın kullanımını sınırlayabilir. Daha küçük paketler, daha az veri tüketimi anlamına gelir ve bu da kullanıcılar için daha ekonomik bir deneyim sunar.

Bakım ve Geliştirme Maliyetleri

Büyük ve karmaşık kod tabanları, genellikle daha fazla bağımlılık içerir. Bu bağımlılıklar, güvenlik açıklarına, uyumluluk sorunlarına ve geliştirme sürecinde beklenmedik hatalara yol açabilir. Paket boyutunu düzenli olarak analiz etmek ve küçültmek, kod tabanınızı daha düzenli ve yönetilebilir tutmanıza yardımcı olur, bu da uzun vadede bakım ve geliştirme maliyetlerini azaltır.

Angular ve Webpack İlişkisi

Angular CLI (Command Line Interface), bir Angular projesinin temelini oluşturan güçlü bir araçtır. Projelerin oluşturulmasından derlenmesine, test edilmesinden dağıtımına kadar birçok görevi otomatikleştirir. Bu otomasyonun önemli bir parçası da, uygulamanızın kaynak kodunu tarayıcıda çalıştırılabilir hale getiren bir “paketleyici” (bundler) olan webpack’tir. Angular CLI, varsayılan olarak webpack’i dahili olarak kullanır ve bu sayede geliştiricilerin webpack yapılandırmasıyla doğrudan uğraşmasına gerek kalmaz.

Üretim derlemesi (ng build --prod veya ng build --configuration=production komutları ile yapılır), uygulamanızı son kullanıcılara dağıtıma hazır hale getirirken bir dizi optimizasyon uygular:

* AOT (Ahead-of-Time) Derleme: Angular şablonları ve bileşenleri, tarayıcıya gönderilmeden önce JavaScript koduna dönüştürülür. Bu, tarayıcının çalışma zamanında derleme yapma ihtiyacını ortadan kaldırır, uygulamanın daha hızlı başlamasını ve daha iyi performans göstermesini sağlar.
* Tree-shaking (Ağaç Sallama): Kullanılmayan kodları (dead code) tespit eder ve paketlerden çıkarır. Bu, özellikle büyük üçüncü taraf kütüphanelerden sadece belirli fonksiyonları kullandığınızda paket boyutunu önemli ölçüde azaltır.
* Minification ve Uglification: JavaScript, CSS ve HTML dosyalarındaki gereksiz boşlukları, yorumları ve uzun değişken isimlerini kaldırarak dosya boyutlarını küçültür. Bu, kodun okunabilirliğini azaltır ancak tarayıcı tarafından daha hızlı indirilir ve ayrıştırılır.
* Modül Birleştirme (Module Concatenation): Webpack’in “Scope Hoisting” özelliği sayesinde, birden fazla modül tek bir fonksiyon bloğunda birleştirilerek paket boyutları daha da küçültülür ve çalışma zamanı performansı artırılır.

Bu optimizasyonlar sonucunda, Angular uygulaması genellikle birkaç ana pakete (bundle) ayrılır:

* runtime.js: Webpack’in çalışma zamanı kodunu içerir.
* polyfills.js: Tarayıcı uyumluluğu için gerekli olan polyfill’leri içerir.
* main.js: Uygulamanızın ana kodu ve başlangıç mantığını içerir.
* vendor.js: Üçüncü taraf kütüphanelerini (Angular kendisi, RxJS, vb.) içerir. Bu paket genellikle en büyük olanıdır.
* lazy-loaded-module-name.js: Tembel yüklenen (lazy-loaded) modüller için ayrı ayrı paketler oluşturulur ve sadece ihtiyaç duyulduğunda yüklenirler.

Bu paketlerin her birinin boyutunu anlamak, nerede optimizasyon yapabileceğinizi belirlemek için kritik öneme sahiptir. İşte burada webpack Bundle Analyzer ve source-map-explorer devreye girer.

webpack Bundle Analyzer ile Paket Analizi

webpack Bundle Analyzer, Angular uygulamalarınızın üretim paketlerinin içeriğini görselleştiren etkileşimli bir araçtır. Uygulamanızın nihai JavaScript paketini oluşturan tüm modülleri, bağımlılıkları ve bunların her birinin kapladığı alanı renkli ve hiyerarşik bir treemap grafiği üzerinde gösterir. Bu görselleştirme sayesinde, uygulamanızın en büyük “ağırlık kaynaklarını” kolayca tespit edebilirsiniz.

Nedir?

webpack Bundle Analyzer, webpack tarafından üretilen stats.json dosyasını kullanarak bir web arayüzü oluşturur. Bu arayüzde, paketlerinizdeki her bir modülün (kendi kodunuz, üçüncü taraf kütüphaneler, resimler vb.) boyutunu ve birbirleriyle olan ilişkilerini görebilirsiniz. Treemap üzerindeki her bir kutu, bir modülü veya bir modül grubunu temsil eder ve boyutu, pakette kapladığı alanla orantılıdır. Kutuların içine daldıkça, daha detaylı bilgilere ulaşabilir, belirli bir kütüphanenin veya kendi kodunuzdaki bir dosyanın neden bu kadar büyük olduğunu anlayabilirsiniz.

Kurulum ve Kullanım

Angular CLI, varsayılan olarak webpack yapılandırmasına doğrudan erişim sağlamaz. Bu nedenle, webpack Bundle Analyzer‘ı Angular projenize entegre etmek için genellikle @angular-builders/custom-webpack gibi bir aracı kullanmamız gerekir. Bu builder, Angular CLI’ın webpack yapılandırmasını genişletmemize olanak tanır.

Adım 1: Gerekli Paketleri Kurma

Öncelikle, custom-webpack builder’ı ve webpack-bundle-analyzer paketini projenize geliştirme bağımlılığı olarak kurun:

npm install --save-dev @angular-builders/custom-webpack webpack-bundle-analyzer
veya
yarn add --dev @angular-builders/custom-webpack webpack-bundle-analyzer

Adım 2: angular.json Dosyasını Yapılandırma

angular.json dosyanızda, uygulamanızın architect.build ve architect.serve kısımlarındaki builder alanını custom-webpack builder’ını kullanacak şekilde değiştirmeniz gerekir. Ayrıca, özel webpack yapılandırma dosyanızın yolunu belirtmelisiniz.

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js" // Özel webpack config dosyanızın yolu
            },
            "outputPath": "dist/your-project-name",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              // ... diğer üretim ayarları ...
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true, // Analiz için source map'ler önemli olabilir
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "your-project-name:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "your-project-name:build:production"
            }
          }
        }
      }
    }
  }
}

Adım 3: webpack.config.js Dosyasını Oluşturma

Projenizin kök dizininde webpack.config.js adında bir dosya oluşturun ve içine webpack-bundle-analyzer eklentisini ekleyin:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static', // 'static' ile HTML dosyası oluşturur, 'server' ile bir sunucu başlatır
      reportFilename: 'bundle-report.html', // Rapor dosyasının adı
      openAnalyzer: false // Tarayıcıyı otomatik açmasın
    })
  ]
};

Adım 4: Uygulamayı Derleme ve Analiz Etme

Şimdi, uygulamanızı üretim modunda derleyin. webpack-bundle-analyzer eklentisi otomatik olarak bir rapor dosyası oluşturacaktır:

ng build --configuration=production

Derleme tamamlandıktan sonra, dist/your-project-name/bundle-report.html yolunda bir HTML dosyası bulacaksınız. Bu dosyayı tarayıcınızda açarak interaktif treemap görselleştirmesini görüntüleyebilirsiniz. Eğer openAnalyzer: true olarak ayarladıysanız, derleme bittiğinde otomatik olarak tarayıcıda açılacaktır.

Alternatif olarak, ng-bundle-analyzer gibi daha basit bir CLI aracı da kullanabilirsiniz. Bu araç, custom-webpack yapılandırmasına gerek kalmadan doğrudan stats.json dosyasını üreterek analiz yapmanızı sağlar:

npm install --save-dev ng-bundle-analyzer
veya
yarn add --dev ng-bundle-analyzer

package.json dosyanıza bir script ekleyin:

{
  "scripts": {
    "analyze": "ng build --configuration=production --stats-json && ng-bundle-analyzer"
  }
}

Ardından, npm run analyze komutunu çalıştırarak analiz raporunu tarayıcınızda görüntüleyebilirsiniz.

Analiz Sonuçlarını Yorumlama

webpack Bundle Analyzer raporu, uygulamanızın paket boyutunu azaltmak için hangi alanlara odaklanmanız gerektiğini net bir şekilde gösterir:

* Büyük Kutular: Treemap’teki en büyük kutular, uygulamanızın en çok yer kaplayan modüllerini veya kütüphanelerini temsil eder. Bu kutuların üzerine gelerek veya tıklayarak daha detaylı bilgilere ulaşabilirsiniz. Örneğin, node_modules klasörü altındaki büyük bir kütüphane (lodash, moment.js, Angular Material’ın tamamı vb.) hemen dikkat çekecektir.
* Tekrar Eden Bağımlılıklar: Bazen farklı kütüphaneler aynı bağımlılığın farklı versiyonlarını içe aktarabilir veya siz farkında olmadan aynı kütüphaneyi birden fazla yerde tam olarak içe aktarabilirsiniz. Bu durum, paketin gereksiz yere büyümesine neden olur. Analyzer, bu tür tekrar eden bağımlılıkları belirlemenize yardımcı olabilir.
* Gereksiz Bağımlılıklar: Uygulamanızda artık kullanılmayan ancak hala package.json dosyanızda bulunan veya yanlışlıkla içe aktarılmış kütüphaneler olabilir. Bu kütüphaneler, paketinize gereksiz yük bindirir.
* Kendi Kodunuzdaki Büyük Modüller: Kendi yazdığınız kodun da büyük modüller oluşturabileceğini unutmayın. Özellikle büyük, monolitik bileşenler veya servisler, paketin önemli bir kısmını oluşturabilir.

İpuçları ve En İyi Uygulamalar

* Detaylı İnceleme: Büyük kutuları belirledikten sonra, bunların neden bu kadar büyük olduğunu araştırın. Bir kütüphanenin tamamına gerçekten ihtiyacınız var mı, yoksa sadece belirli fonksiyonlarını mı kullanıyorsunuz?
* Lazy Loading Etkisi: Tembel yüklenen (lazy-loaded) modüllerin ayrı paketler halinde göründüğünü fark edeceksiniz. Bu, ana paketin boyutunu küçülttüğünüzü ve kullanıcı deneyimini iyileştirdiğinizi gösterir.
* Zamanla Takip: Paket boyutunu düzenli olarak analiz etmek ve zaman içindeki değişiklikleri takip etmek önemlidir. Yeni özellikler eklendikçe veya kütüphaneler güncellendikçe paket boyutu artabilir. Otomatik CI/CD süreçlerinize analiz adımını dahil etmek, regresyonları erken tespit etmenizi sağlar.

source-map-explorer ile Derinlemesine İnceleme

webpack Bundle Analyzer genel paket yapısını ve bağımlılıkları görselleştirirken, source-map-explorer daha mikro düzeyde bir analiz sunar. Üretim derlemesi sırasında oluşturulan kaynak haritaları (source maps) kullanarak, sıkıştırılmış ve birleştirilmiş JavaScript dosyalarındaki her bir baytın orijinal kaynak kodunuzdaki hangi satır veya fonksiyona ait olduğunu gösterir. Bu, özellikle kendi kodunuzdaki büyük fonksiyonları, bileşenleri veya kullanılmayan kodları tespit etmek için çok değerli bir araçtır.

Nedir?

source-map-explorer, derlenmiş JavaScript dosyalarınızın ve bunlarla ilişkilendirilmiş kaynak haritalarının bir analizini yaparak, her bir orijinal kaynak dosyasının ve hatta dosya içindeki fonksiyon veya değişkenlerin ne kadar yer kapladığını gösteren etkileşimli bir treemap veya JSON çıktısı oluşturur. webpack Bundle Analyzer modül düzeyinde çalışırken, source-map-explorer dosya ve hatta fonksiyon düzeyinde bir analiz sunarak, kodunuzun hangi spesifik parçalarının paketin boyutunu artırdığını anlamanıza yardımcı olur.

Kurulum ve Kullanım

source-map-explorer‘ı kullanmak için öncelikle onu projenize geliştirme bağımlılığı olarak kurmanız gerekir:

npm install --save-dev source-map-explorer
veya
yarn add --dev source-map-explorer

Adım 1: Kaynak Haritaları ile Üretim Derlemesi

source-map-explorer‘ın çalışabilmesi için Angular uygulamanızı kaynak haritaları (source maps) ile derlemeniz gerekir. Varsayılan olarak, üretim derlemesinde kaynak haritaları kapalı olabilir veya farklı bir formatta üretilebilir. angular.json dosyasında sourceMap ayarını true olarak ayarlayarak veya ng build komutuna --source-map bayrağını ekleyerek bunu sağlayabilirsiniz:

ng build --configuration=production --source-map

Bu komut, dist/your-project-name dizinine .js dosyalarının yanı sıra bunlara karşılık gelen .js.map dosyalarını da oluşturacaktır.

Adım 2: source-map-explorer’ı Çalıştırma

source-map-explorer‘ı çalıştırmak için, ona derlenmiş JavaScript dosyalarınızın yolunu ve bunlara karşılık gelen kaynak haritalarının yolunu belirtmeniz gerekir. Genellikle tüm JavaScript dosyalarını ve haritalarını hedeflemek istersiniz.

package.json dosyanıza bir script eklemek en pratik yoldur:

{
  "scripts": {
    "explore": "ng build --configuration=production --source-map && source-map-explorer 'dist//*.js'"
  }
}

Ardından, bu script’i çalıştırın:

npm run explore

Bu komut, varsayılan olarak tarayıcınızda etkileşimli bir treemap görselleştirmesi açacaktır. --html bayrağını kullanarak HTML raporu oluşturabilir veya --json bayrağı ile bir JSON çıktısı alabilirsiniz.

# HTML raporu oluşturmak için
source-map-explorer 'dist//*.js' --html report.html

JSON çıktısı almak için
source-map-explorer 'dist//*.js' --json report.json

Analiz Sonuçlarını Yorumlama

source-map-explorer tarafından oluşturulan treemap, webpack Bundle Analyzer‘a benzer bir görselleştirme sunar, ancak daha granülerdir. Burada gördüğünüz kutular, genellikle orijinal TypeScript/JavaScript dosyalarınızdaki fonksiyonları, sınıfları veya hatta belirli kod bloklarını temsil eder.

* Kendi Kodunuzdaki Büyük Dosyalar/Fonksiyonlar: Treemap’te kendi kaynak kodunuzdaki (src/app veya src/environments gibi) büyük dosyaları veya fonksiyonları arayın. Belirli bir bileşenin veya servisin beklenenden daha büyük olduğunu fark edebilirsiniz. Bu, o bileşenin çok fazla mantık içerdiğini, gereksiz bağımlılıkları olduğunu veya optimize edilmesi gereken bir yapıya sahip olduğunu gösterebilir.
* Kullanılmayan Kod (Dead Code): Eğer bir dosya veya fonksiyon treemap’te görünüyorsa ancak uygulamanızda hiçbir yerde çağrılmıyorsa, bu “dead code” olabilir. Webpack’in tree-shaking özelliği genellikle bu tür kodları kaldırsa da, bazı durumlarda (özellikle yan etkileri olan kütüphaneler veya yanlış içe aktarımlar nedeniyle) gözden kaçabilir.
* Kütüphanelerin Belirli Kısımları: Üçüncü taraf kütüphanelerin sadece belirli kısımlarını içe aktardığınızı düşünseniz bile, source-map-explorer o kütüphanenin ne kadarının paketinize dahil edildiğini görmenizi sağlar. Örneğin, bir UI kütüphanesinden sadece bir veya iki bileşen kullanıyorsanız, ancak treemap’te o kütüphanenin tamamının büyük bir yer kapladığını görüyorsanız, bu modüler içe aktarım stratejinizin yetersiz olduğunu gösterebilir.

İpuçları ve En İyi Uygulamalar

* Refactoring: Kendi kodunuzdaki büyük fonksiyonları veya sınıfları daha küçük, daha odaklı parçalara ayırarak refactor edin. Bu, hem kodun okunabilirliğini artırır hem de tree-shaking için daha fazla fırsat yaratır.
* Gereksiz İçe Aktarımları Kaldırma: Kullanmadığınız import ifadelerini veya package.json bağımlılıklarını kaldırın.
* Modüler Kütüphane Kullanımı: Kütüphanelerin tamamını içe aktarmak yerine, sadece ihtiyaç duyduğunuz belirli modülleri, bileşenleri veya fonksiyonları içe aktarın. Örneğin:
* RxJS için: import { map } from 'rxjs/operators'; yerine import { map } from 'rxjs'; ve ardından pipe(map(...)) kullanmak.
* Angular Material için: Sadece kullandığınız modülleri app.module.ts‘ye içe aktarın (örn. MatButtonModule, MatCardModule).
Lodash için: import get from 'lodash/get'; yerine import as _ from 'lodash'; kullanmayın.
* Öğeler Arası Bağlantıları Anlama: source-map-explorer, kodunuzun farklı bölümlerinin nasıl bir araya geldiğini anlamanıza yardımcı olur. Bu, özellikle karmaşık bir mimariye sahip uygulamalarda, bağımlılık döngülerini veya beklenmedik büyük bağımlılıkları tespit etmek için faydalıdır.

Paket Boyutunu Azaltma Stratejileri

Analiz araçları sayesinde uygulamanızın zayıf noktalarını belirledikten sonra, sıra paket boyutunu azaltmaya yönelik pratik stratejileri uygulamaya gelir. Bu stratejiler genellikle birbiriyle ilişkili ve birkaçı bir arada kullanıldığında en iyi sonuçları verir.

Lazy Loading (Tembel Yükleme)

Lazy loading, Angular uygulamalarında paket boyutunu azaltmanın en etkili yollarından biridir. Bu teknik, bir modülün veya bileşenin sadece kullanıcı tarafından ihtiyaç duyulduğunda (örneğin, belirli bir rotaya gidildiğinde) yüklenmesini sağlar. Bu sayede, uygulamanın ilk yükleme süresi kısalır çünkü başlangıçta sadece temel modüller indirilir.

* Nasıl Yapılır: Angular’da RouterModule ile loadChildren özelliğini kullanarak modülleri tembel yükleyebilirsiniz. Örneğin:

const routes: Routes = [
      {
        path: 'admin',
        loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
      },
      // ... diğer rotalar
    ];

Bu, AdminModule‘ün sadece kullanıcı /admin rotasına gittiğinde yüklenmesini sağlar.

Tree-shaking ve Dead Code Elimination

Tree-shaking, webpack’in ve Angular AOT derleyicisinin ortaklaşa çalıştığı bir optimizasyon tekniğidir. Kullanılmayan veya “ölü” kodları (dead code) nihai üretim paketinden çıkarır.

* Nasıl Etkinleştirilir: Angular CLI, üretim derlemesi sırasında ( --configuration=production veya --prod) tree-shaking’i otomatik olarak etkinleştirir.
* En İyi Uygulamalar:
* Kütüphaneleri modüler bir şekilde içe aktarın (örneğin, lodash/get yerine lodash‘in tamamı).
* Yan etkisi olmayan (side-effect free) kütüphaneleri tercih edin. Bir kütüphanenin package.json dosyasında sideEffects: false veya belirli dosyaları işaret eden bir dizi varsa, webpack bu kütüphaneyi daha agresif bir şekilde tree-shake edebilir.
* Kendi kodunuzda kullanmadığınız fonksiyonları, sınıfları veya değişkenleri kaldırın.

Gereksiz Bağımlılıkları Kaldırma

Projenizde artık kullanılmayan npm paketlerini belirleyin ve kaldırın. Bazen bir kütüphaneyi test amaçlı kurarsınız ve sonra kullanmaktan vazgeçersiniz, ancak onu package.json dosyanızdan kaldırmayı unutursunuz.

* Nasıl Belirlenir: webpack Bundle Analyzer veya source-map-explorer raporlarında büyük yer kaplayan ancak uygulamanızda aktif olarak kullanılmayan kütüphaneleri arayın.
* Kaldırma: npm uninstall veya yarn remove komutlarıyla kaldırabilirsiniz.

Modüler İçe Aktarım (Modular Imports)

Birçok modern kütüphane, sadece ihtiyaç duyulan kısımlarını içe aktarma imkanı sunar. Tüm kütüphaneyi içe aktarmak yerine, sadece kullandığınız modülleri veya fonksiyonları içe aktararak paket boyutunu önemli ölçüde azaltabilirsiniz.

* Örnekler:
* Angular Material: import { MatButtonModule } from '@angular/material/button'; yerine import { MatButtonModule, MatCardModule, MatInputModule } from '@angular/material'; kullanmak.
* RxJS: Operatörleri ayrı ayrı içe aktarın: import { map, filter } from 'rxjs/operators';
* Lodash: import { get, debounce } from 'lodash'; yerine import get from 'lodash/get'; import debounce from 'lodash/debounce';

Resim ve Medya Optimizasyonu

JavaScript paketleri dışında, resimler ve diğer medya dosyaları da uygulamanızın toplam boyutunu önemli ölçüde artırabilir.

* Sıkıştırma: Resimleri sıkıştırma araçlarıyla optimize edin (örneğin, TinyPNG, ImageOptim).
* Doğru Format: WebP gibi modern resim formatlarını kullanın. Bu formatlar, JPEG veya PNG’ye göre daha iyi sıkıştırma oranları sunar.
* Responsive Resimler: Farklı ekran boyutları için farklı çözünürlüklerde resimler sunarak, küçük ekranlarda gereksiz yere büyük resimler indirilmesini önleyin.
* SVG Kullanımı: Vektörel grafikler için SVG kullanın; bunlar genellikle daha küçük dosya boyutlarına sahiptir ve çözünürlükten bağımsızdır.

Sıkıştırma (Gzip/Brotli)

Sunucu tarafında Gzip veya Brotli sıkıştırmasını etkinleştirmek, tarayıcıya gönderilen dosyaların boyutunu önemli ölçüde azaltır. Bu, paket boyutunu fiziksel olarak küçültmese de, ağ üzerinden aktarılan veri miktarını azaltır ve yükleme sürelerini hızlandırır.

* Nasıl Etkinleştirilir: Web sunucunuzda (Nginx, Apache, Express.js vb.) bu sıkıştırma algoritmalarını etkinleştirmeniz gerekir. Angular CLI’ın ng build komutu, sıkıştırılmamış dosyaları üretir; sıkıştırma sunucu tarafında yapılır.

Üretim Ortamı Optimizasyonları

Angular CLI, üretim derlemesi için bir dizi varsayılan optimizasyon sunar. Bunların tam olarak etkin olduğundan emin olun.

* angular.json Ayarları: angular.json dosyasındaki production yapılandırmasında optimization, buildOptimizer, outputHashing, namedChunks, extractLicenses gibi ayarların doğru şekilde yapılandırıldığından emin olun. Özellikle optimization: true ve buildOptimizer: true en iyi performansı sağlar.
* Önbellekleme (Caching): Tarayıcı önbelleklemesini ve CDN (Content Delivery Network) kullanımını etkinleştirerek, kullanıcıların uygulamanızı tekrar ziyaret ettiklerinde dosyaları yeniden indirmesini önleyebilirsiniz. outputHashing: "all" ayarı, dosyaların içeriği değiştiğinde tarayıcıların yeni versiyonları indirmesini garanti eder.

Cache Stratejileri

Tarayıcı önbelleklemesi, bir uygulamanın daha sonraki ziyaretlerde daha hızlı yüklenmesini sağlar. Angular uygulamalarında, servis işçileri (Service Workers) kullanarak çevrimdışı önbellekleme ve anında yükleme (instant loading) gibi gelişmiş önbellekleme stratejileri uygulayabilirsiniz.

* Angular PWA: Angular CLI, ng add @angular/pwa komutuyla kolayca bir servis işçisi eklemenize olanak tanır. Bu, uygulamanızın ağdan bağımsız çalışmasını ve kaynakları verimli bir şekilde önbelleğe almasını sağlar.

Sonuç

Angular uygulamalarının paket boyutunu analiz etmek ve optimize etmek, modern web geliştirmenin ayrılmaz bir parçasıdır. Kullanıcı deneyimini iyileştirmek, SEO performansını artırmak ve operasyonel maliyetleri düşürmek için bu süreçlere sürekli yatırım yapmak önemlidir. webpack Bundle Analyzer ve source-map-explorer gibi güçlü araçlar, uygulamanızın “ağırlık kaynaklarını” belirlemenize ve doğru optimizasyon stratejilerini uygulamanıza olanak tanır.

Bu makalede ele aldığımız adımları ve stratejileri uygulayarak, daha hızlı, daha verimli ve kullanıcı dostu Angular uygulamaları geliştirebilirsiniz. Unutmayın ki paket boyutu analizi, tek seferlik bir görev değil, uygulamanızın yaşam döngüsü boyunca düzenli olarak tekrarlanması gereken sürekli bir süreçtir. Yeni özellikler eklendikçe, bağımlılıklar güncellendikçe veya kod tabanı büyüdükçe, paket boyutunun değiştiğini ve yeni optimizasyon fırsatlarının ortaya çıktığını göreceksiniz. Bu araçları kullanarak uygulamanızın performansını sürekli olarak izlemek, rekabetçi kalmak ve kullanıcılarınıza en iyi deneyimi sunmak için kritik öneme sahiptir.