webpack Bundle Analyzer ile Angular Uygulamalarını Analiz Etme: Kapsamlı Bir Rehber
Giriş: Neden Bundle Boyutunu Önemsiyoruz?
Modern web uygulamalarının karmaşıklığı arttıkça, kullanıcı deneyimi ve uygulama performansı arasındaki ilişki daha da kritik hale gelmektedir. Angular gibi güçlü framework’lerle geliştirilen uygulamalar, genellikle birçok modül, kütüphane ve bileşen içerir. Bu bileşenlerin hepsi, nihai üretim (production) çıktısında bir araya getirilerek tarayıcıya sunulan “bundle” adı verilen bir veya daha fazla JavaScript dosyası oluşturur. Bu bundle’ların boyutu, uygulamanın yüklenme süresi, etkileşim süresi (Time to Interactive – TTI) ve ilk anlamlı çizim (First Contentful Paint – FCP) gibi temel performans metriklerini doğrudan etkiler.
Büyük bundle boyutları, özellikle mobil cihazlarda veya yavaş internet bağlantılarında kullanıcılar için ciddi bir engel teşkil edebilir. Yavaş yüklenen bir uygulama, kullanıcıların sabırsızlanıp sayfayı terk etmesine, dolayısıyla potansiyel müşteri veya okuyucu kaybına yol açabilir. Ayrıca, arama motorları da sayfa hızını sıralama faktörlerinden biri olarak değerlendirdiği için, performans optimizasyonu SEO açısından da büyük önem taşır.
Angular, AOT (Ahead-of-Time) derleme ve tree-shaking gibi özelliklerle bundle boyutunu optimize etmek için yerleşik mekanizmalar sunsa da, geliştiricilerin uygulamalarına ekledikleri üçüncü taraf kütüphaneler, gereksiz import’lar veya yanlış yapılandırılmış modüller nedeniyle bundle’lar hala beklenenden daha büyük olabilir. İşte tam bu noktada, uygulamanızın bundle içeriğini görsel olarak analiz etmenize olanak tanıyan bir araç olan webpack Bundle Analyzer devreye girer. Bu makalede, webpack Bundle Analyzer’ın ne olduğunu, Angular uygulamalarıyla nasıl entegre edileceğini ve elde edilen sonuçların nasıl yorumlanarak performans iyileştirmeleri yapılabileceğini detaylı bir şekilde inceleyeceğiz.
webpack Bundle Analyzer Nedir?
webpack Bundle Analyzer, webpack tarafından oluşturulan çıktı bundle’larının içeriğini interaktif bir treemap (ağaç haritası) olarak görselleştiren bir araçtır. Bir Angular uygulaması oluşturduğunuzda, Angular CLI arka planda webpack’i kullanarak tüm kodunuzu bir araya getirir ve tarayıcıda çalıştırılabilen optimize edilmiş JavaScript dosyaları oluşturur. Bu işlem sırasında, tüm modüller, kütüphaneler ve bileşenler belirli kurallara göre gruplandırılır.
Bundle Analyzer, bu gruplandırılmış çıktıyı (genellikle bir stats.json dosyası aracılığıyla) okur ve her bir modülün veya dosyanın bundle içindeki payını gösteren bir görsel harita oluşturur. Bu harita sayesinde, uygulamanızın boyutunun neden bu kadar büyük olduğunu veya hangi modüllerin en fazla yer kapladığını kolayca görebilirsiniz.
Temel özellikleri şunlardır:
* İnteraktif Treemap: Her bir kutu, bir modülü veya bir grubu temsil eder ve boyutu, bundle içindeki gerçek boyutunu yansıtır. Fareyle kutuların üzerine gelindiğinde veya tıklandığında detaylı bilgiler (parsed size, gzipped size vb.) görüntülenebilir.
* Farklı Boyutlandırma Seçenekleri: Modüllerin boyutunu “parsed size” (derlenmiş ama sıkıştırılmamış), “gzipped size” (gzip ile sıkıştırılmış) veya “stat size” (diskteki ham boyut) gibi farklı metriklerle görüntüleyebilirsiniz. Genellikle “gzipped size” kullanıcıların gerçek indirme boyutunu yansıttığı için en anlamlı metrik olarak kabul edilir.
* Kaynak Haritası Desteği: Kaynak haritaları (source maps) ile entegre çalışarak, orijinal kaynak kodunuzdaki hangi dosyanın bundle’da ne kadar yer kapladığını gösterir.
* Chunk’lar ve Modüller: Uygulamanızın farklı chunk’larını (ana bundle, vendor bundle, lazy-loaded modüller) ve bu chunk’ların içindeki tek tek modülleri ayrı ayrı incelemenizi sağlar.
Bu görselleştirme, “Neden uygulamam bu kadar büyük?” veya “Hangi kütüphane en çok yer kaplıyor?” gibi sorulara hızlı ve net yanıtlar bulmanıza yardımcı olur. Bu sayede, optimizasyon çabalarınızı en etkili alanlara odaklayabilirsiniz.
Kurulum ve Temel Kullanım
webpack Bundle Analyzer’ı kullanmaya başlamak oldukça basittir. Öncelikle, projenize geliştirme bağımlılığı olarak kurmanız gerekir:
npm install --save-dev webpack-bundle-analyzer
veya
yarn add -D webpack-bundle-analyzerwebpack tabanlı bir projede (Angular CLI kullanmayan saf webpack projeleri gibi), webpack.config.js dosyanıza aşağıdaki gibi bir eklenti (plugin) olarak eklersiniz:
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
// ... diğer webpack yapılandırmanız ...
plugins: [
new BundleAnalyzerPlugin()
]
};Bu yapılandırma ile webpack’i her çalıştırdığınızda (örneğin npm run build komutuyla), Analyzer otomatik olarak bir rapor oluşturacak ve varsayılan olarak tarayıcınızda açacaktır.
Ancak Angular uygulamaları, Angular CLI tarafından yönetilen karmaşık bir webpack yapılandırmasına sahiptir. Angular CLI, webpack yapılandırmasını soyutlar ve doğrudan webpack.config.js dosyasını düzenlemenize izin vermez. Bu nedenle, Angular CLI ile webpack Bundle Analyzer’ı kullanmak için biraz farklı bir yaklaşım benimsememiz gerekmektedir.
Angular CLI ile Entegrasyon
Angular CLI ile webpack Bundle Analyzer’ı entegre etmenin en yaygın ve önerilen yolu, @angular-builders/custom-webpack paketini kullanmaktır. Bu builder, Angular CLI’ın varsayılan build sürecini genişletmenize ve kendi webpack yapılandırma parçacıklarınızı eklemenize olanak tanır.
custom-webpack Builder Kurulumu
İlk olarak, gerekli paketleri projenize kurun:
npm install -D @angular-builders/custom-webpack webpack-bundle-analyzer
veya
yarn add -D @angular-builders/custom-webpack webpack-bundle-analyzerangular.json Yapılandırması
Ardından, projenizin kök dizininde bulunan angular.json dosyasını düzenlemeniz gerekecek. architect altındaki build ve isteğe bağlı olarak serve yapılandırmalarını @angular-builders/custom-webpack:browser ve @angular-builders/custom-webpack:dev-server builder’larını kullanacak şekilde güncelleyin.
Aşağıdaki örnek, production yapılandırması için Analyzer’ı etkinleştirecek şekilde angular.json dosyanızın nasıl görünmesi gerektiğini göstermektedir:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"your-angular-app": { // Uygulamanızın adı
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser", // Burayı değiştirin
"options": {
"outputPath": "dist/your-angular-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"customWebpackConfig": { // Bu kısmı ekleyin
"path": "./extra-webpack.config.js",
"mergeStrategies": {
"plugins": "prepend"
}
}
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all",
"customWebpackConfig": { // Production için de custom webpack config ekleyin
"path": "./extra-webpack.config.js",
"mergeStrategies": {
"plugins": "prepend"
}
}
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server", // Burayı da değiştirebilirsiniz
"options": {
"browserTarget": "your-angular-app:build"
},
"configurations": {
"production": {
"browserTarget": "your-angular-app:build:production"
},
"development": {
"browserTarget": "your-angular-app:build:development"
}
},
"defaultConfiguration": "development"
},
// ... diğer architect yapılandırmaları (test, lint vb.) ...
}
}
}
}Yukarıdaki örnekte, customWebpackConfig özelliği eklenmiştir. path özelliği, webpack yapılandırma parçacıklarınızı içeren dosyanın yolunu belirtir. mergeStrategies ise, Angular CLI’ın varsayılan webpack yapılandırması ile sizin özel yapılandırmanızın nasıl birleştirileceğini tanımlar. plugins: "prepend" genellikle Analyzer gibi eklentileri eklerken iyi bir stratejidir.
extra-webpack.config.js Oluşturma
Şimdi, angular.json dosyasında belirttiğiniz yolda (./extra-webpack.config.js) bir dosya oluşturun ve içine webpack Bundle Analyzer eklentisini ekleyin:
// extra-webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin({
// Analyzer'ın davranışını yapılandırmak için seçenekler
analyzerMode: 'static', // 'server' (varsayılan), 'static' veya 'disabled'
reportFilename: 'bundle-report.html', // 'static' modunda raporun kaydedileceği dosya adı
openAnalyzer: false, // Tarayıcıda otomatik açılıp açılmayacağı
generateStatsFile: true, // Bir stats.json dosyası oluşturulup oluşturulmayacağı
statsFilename: 'bundle-stats.json' // stats.json dosyasının adı
})
]
};BundleAnalyzerPlugin Seçenekleri:
* analyzerMode:
* 'server' (varsayılan): Bir web sunucusu başlatır ve raporu otomatik olarak tarayıcıda açar.
* 'static': Raporu bir HTML dosyası olarak kaydeder (reportFilename ile belirtilen yola). Bu, CI/CD ortamlarında veya raporu daha sonra incelemek istediğinizde kullanışlıdır.
* 'disabled': Analyzer’ı devre dışı bırakır ancak generateStatsFile: true ise stats.json dosyasını oluşturur.
* reportFilename: analyzerMode: 'static' olduğunda raporun kaydedileceği dosya adını belirtir (varsayılan: report.html).
* openAnalyzer: analyzerMode: 'server' olduğunda raporun tarayıcıda otomatik olarak açılıp açılmayacağını kontrol eder (varsayılan: true).
* generateStatsFile: stats.json dosyasının oluşturulup oluşturulmayacağını belirtir (varsayılan: false). Bu dosya, Analyzer’ın raporu oluşturmak için kullandığı ham verileri içerir.
* statsFilename: generateStatsFile: true olduğunda stats.json dosyasının adını belirtir (varsayılan: stats.json).
* logLevel: Çıktı konsolundaki log seviyesini ayarlar (‘info’, ‘warn’, ‘error’, ‘silent’).
Genellikle, üretim build’leri için analyzerMode: 'static' ve openAnalyzer: false ayarlarını kullanmak, build sürecini engellemeden raporu oluşturmak için iyi bir yaklaşımdır.
package.json Script’leri
Son olarak, bu yapılandırmayı kolayca çalıştırmak için package.json dosyanıza yeni bir script ekleyebilirsiniz:
{
"name": "your-angular-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"analyze": "ng build --configuration production --stats-json",
"analyze:report": "webpack-bundle-analyzer dist/your-angular-app/bundle-stats.json"
},
// ... diğer bağımlılıklar ...
}Yukarıdaki analyze script’i, üretim modunda bir build yapar ve generateStatsFile: true ayarı sayesinde bundle-stats.json dosyasını dist/your-angular-app klasörüne kaydeder (veya statsFilename ile belirttiğiniz yere).
Ardından, analyze:report script’ini çalıştırarak kaydedilen bundle-stats.json dosyasını kullanarak Analyzer raporunu açabilirsiniz:
npm run analyze
npm run analyze:reportBu şekilde, build sürecinden ayrı olarak raporu istediğiniz zaman inceleyebilirsiniz.
Analiz Sonuçlarını Anlama
webpack Bundle Analyzer raporu, genellikle tarayıcınızda açılan interaktif bir treemap’tir. Bu harita, uygulamanızın bundle’larının görsel bir temsilidir.
Treemap Görselleştirmesi
* Kutular ve Hiyerarşi: Haritadaki her bir dikdörtgen, bir webpack chunk’ını, bir modülü veya bir dosyayı temsil eder. Büyük kutular genellikle ana chunk’ları (örn. main.js, vendor.js) veya lazy-loaded modülleri temsil eder. Bu büyük kutuların içinde, o chunk’a ait olan daha küçük modüller ve dosyalar bulunur.
* Boyutlandırma: Bir kutunun boyutu, bundle içindeki gerçek boyutunu yansıtır. Varsayılan olarak genellikle “parsed size” (derlenmiş, sıkıştırılmamış boyut) kullanılır, ancak Analyzer arayüzünden “gzipped size” (sıkıştırılmış boyut) veya “stat size” (diskteki ham boyut) gibi farklı metrikler arasında geçiş yapabilirsiniz. “Gzipped size” genellikle son kullanıcıların indirdiği gerçek boyutu yansıttığı için en önemli metrik olarak kabul edilir.
* Renkler: Farklı renkler, genellikle farklı chunk’ları veya kaynak türlerini temsil eder. Örneğin, ana uygulama kodunuz, üçüncü taraf kütüphaneleriniz (vendor) ve lazy-loaded modüller farklı renkte olabilir. Renkler, hangi bölgelerin en çok yer kapladığını hızlıca anlamanıza yardımcı olur.
* Etkileşim: Fareyle bir kutunun üzerine geldiğinizde, o modül hakkında detaylı bilgiler (tam yolu, parsed size, gzipped size vb.) gösterilir. Bir kutuya tıklamak, o kutunun içeriğini yakınlaştırır ve daha derinlemesine incelemenizi sağlar. Sağ üst köşedeki arama kutusunu kullanarak belirli modülleri veya dosyaları bulabilirsiniz.
Anahtar Metrikler ve Yaygın Sorunlar
Raporu incelerken aşağıdaki anahtar metrik ve sorunlara odaklanın:
1. Ana Bundle (main.js): Uygulamanızın ana kodunu, bootstrap mantığını ve genellikle ilk yüklenen bileşenleri içerir. Bu bundle’ın çok büyük olması, uygulamanızın ilk yüklenme süresini artırır.
2. Vendor Bundle (vendor.js): Genellikle node_modules klasöründen gelen üçüncü taraf kütüphaneleri (Angular, RxJS, Material UI vb.) içerir. Bu bundle’ın boyutu, uygulamanızın kullandığı kütüphanelerin sayısına ve boyutuna bağlıdır. Büyük bir vendor bundle, gereksiz kütüphanelerin veya kütüphanelerin tamamının yanlışlıkla dahil edildiğini gösterebilir.
3. Lazy-Loaded Modüller: Angular’ın lazy loading özelliği sayesinde, belirli modüller yalnızca ihtiyaç duyulduğunda yüklenir. Analyzer, bu modülleri ayrı ayrı chunk’lar olarak gösterir. Bu chunk’ların boyutları, o modülün ve bağımlılıklarının ne kadar büyük olduğunu anlamanızı sağlar.
4. Tekrar Eden Bağımlılıklar: Bazen, farklı kütüphaneler aynı bağımlılığı farklı versiyonlarda içerebilir veya siz yanlışlıkla aynı kütüphaneyi birden fazla yerden import edebilirsiniz. Analyzer, bu tekrar eden modülleri belirlemenize yardımcı olur.
5. Kullanılmayan Kod (Dead Code): Bir kütüphaneyi import ettiğinizde, o kütüphanenin tamamını değil, sadece ihtiyacınız olan kısımlarını import ettiğinizden emin olun. Aksi takdirde, kullanmadığınız kodlar bundle’ınıza dahil olabilir. Örneğin, import { Button } from '@angular/material'; yerine import { MatButtonModule } from '@angular/material/button'; gibi modüler import’lar tercih edilmelidir.
6. Büyük Tek Modüller: Treemap’te orantısız derecede büyük görünen tek bir modül varsa, bu genellikle bir optimizasyon fırsatıdır. Bu modül, bir resim dosyası, büyük bir JSON verisi veya yanlışlıkla tüm kütüphaneyi import ettiğiniz bir durum olabilir.
Raporu incelerken, en büyük kutulardan başlayarak aşağı doğru inmek ve bu kutuların neden bu kadar büyük olduğunu anlamaya çalışmak iyi bir stratejidir.
Bundle Boyutunu Küçültme Stratejileri
webpack Bundle Analyzer’dan elde ettiğiniz bilgilerle, uygulamanızın bundle boyutunu küçültmek için çeşitli stratejiler uygulayabilirsiniz:
1. Tree-shaking’i Etkin Kullanma
Tree-shaking, JavaScript uygulamalarında kullanılmayan kodu (dead code) kaldırma işlemidir. webpack, ESM (ECMAScript Modules) yapısı sayesinde hangi fonksiyonların veya modüllerin gerçekten kullanıldığını tespit edebilir.
* ESM Kullanımı: Kütüphaneleri import ederken mümkün olduğunca ESM formatını tercih edin. package.json içindeki module veya esm alanları genellikle bunu gösterir.
* sideEffects: false: Kütüphane geliştiricileri, package.json dosyalarına sideEffects: false ekleyerek, kütüphanelerinin yan etkisi olmayan modüller içerdiğini webpack’e bildirir. Bu, tree-shaking’in daha etkili olmasını sağlar. Eğer bir kütüphane bu etikete sahip değilse ve siz sadece bir kısmını kullanıyorsanız, tüm kütüphane bundle’a dahil edilebilir.
2. Lazy Loading (Tembel Yükleme)
Angular’ın en güçlü performans optimizasyon özelliklerinden biridir. Uygulamanızdaki modülleri, yalnızca kullanıcı o modüle ihtiyaç duyduğunda yükleyecek şekilde yapılandırabilirsiniz.
* Angular Router ile: Router’ı kullanarak modülleri lazy-load edebilirsiniz:
const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
},
// ... diğer rotalar
];Bundle Analyzer’da, lazy-loaded modüller ayrı chunk’lar olarak görünür ve ana bundle boyutunu düşürdüğünü açıkça görebilirsiniz.
3. Kütüphane Optimizasyonu
* Modüler Import’lar: Büyük kütüphanelerin tamamını import etmek yerine, sadece ihtiyacınız olan modülleri import edin.
Kötü: import as moment from 'moment';
* İyi: import { format } from 'date-fns'; (Moment.js yerine daha hafif bir alternatif)
* Kötü: import { MatButtonModule, MatCardModule, MatInputModule } from '@angular/material'; (Bu zaten modülerdir, ancak yanlışlıkla @angular/material‘ın tamamını import etmediğinizden emin olun)
* İyi: import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
* Alternatif Kütüphaneler: Bazı popüler kütüphanelerin daha hafif alternatifleri olabilir. Örneğin, Moment.js yerine date-fns veya luxon kullanmak, bundle boyutunu önemli ölçüde azaltabilir. Lodash gibi kütüphanelerde, lodash/fp veya doğrudan fonksiyon import’ları (import debounce from 'lodash/debounce';) tüm kütüphaneyi dahil etmekten daha iyidir.
* Gereksiz Bağımlılıkları Kaldırma: package.json dosyanızı gözden geçirin ve artık kullanmadığınız veya gereksiz olan bağımlılıkları kaldırın. npm-check veya depcheck gibi araçlar, kullanılmayan bağımlılıkları bulmanıza yardımcı olabilir.
4. Görsel Varlıkların ve CSS’in Optimizasyonu
* Resim Optimizasyonu: Büyük resim dosyaları, bundle boyutunu doğrudan etkilemese de, toplam sayfa boyutunu ve yüklenme süresini artırır. Resimleri sıkıştırın, doğru formatları kullanın (WebP gibi), responsive resimler kullanın ve lazy-load edin.
* Fontlar: Özel fontlar kullanıyorsanız, yalnızca ihtiyacınız olan karakter setlerini ve font ağırlıklarını yükleyin. font-display: swap kullanarak fontların yüklenmesini optimize edin.
* CSS Optimizasyonu: Kullanılmayan CSS’i kaldırın (PurgeCSS gibi araçlarla), CSS’inizi minifiye edin ve sıkıştırın.
5. Angular CLI ve webpack Yapılandırma Ayarları
* Üretim Modu (--configuration production): Angular CLI’ın üretim build’i, varsayılan olarak AOT derleme, minification, tree-shaking ve dead code elimination gibi optimizasyonları içerir. Her zaman üretim build’inizi analiz edin.
* Source Maps: Üretim build’lerinde sourceMap‘leri devre dışı bırakmak, bundle boyutunu etkilemese de, dağıtım klasörünün genel boyutunu azaltır. Hata ayıklama için ayrı bir sunucuda veya özel bir ortamda source map’leri tutabilirsiniz.
* buildOptimizer: Angular 9 ve sonrası için varsayılan olarak etkindir. Daha agresif tree-shaking ve minification yapar.
* vendorChunk: Varsayılan olarak etkin olan bu ayar, node_modules‘ten gelen tüm kütüphaneleri ayrı bir vendor.js chunk’ına taşır. Bu, önbelleğe almayı iyileştirir çünkü uygulama kodunuz değiştiğinde vendor chunk’ı yeniden indirilmek zorunda kalmaz. Ancak, bazı durumlarda vendor chunk’ın çok büyümesi yerine, kütüphaneleri lazy-loaded modüllerle birlikte yüklemek daha faydalı olabilir.
Gelişmiş Kullanım ve İpuçları
* CI/CD Entegrasyonu: Bundle boyutunu sürekli takip etmek için webpack Bundle Analyzer’ı CI/CD pipeline’ınıza entegre edebilirsiniz. analyzerMode: 'static' ve openAnalyzer: false seçenekleriyle bir HTML raporu oluşturup, bu raporu bir artifact olarak saklayabilir veya boyut değişimlerini izleyen bir araçla (örn. Lighthouse CI) birleştirebilirsiniz. Bu, zamanla bundle boyutunda meydana gelen istenmeyen artışları erken fark etmenizi sağlar.
* JSON Çıktısını Kullanma: generateStatsFile: true seçeneğiyle oluşturulan stats.json dosyası, bundle içeriği hakkında ham, yapılandırılmış veriler içerir. Bu verileri programatik olarak okuyarak kendi özel analiz araçlarınızı veya metriklerinizi oluşturabilirsiniz. Örneğin, belirli bir eşiği aşan modülleri tespit etmek için bir script yazabilirsiniz.
* Diğer Analiz Araçları: webpack Bundle Analyzer harika bir araç olsa da, ek araçlarla birlikte kullanmak daha kapsamlı bir performans analizi sağlar:
* Source-map-explorer: Tek tek JavaScript dosyalarının boyutunu ve hangi kaynak kod satırlarının o boyuta katkıda bulunduğunu görselleştirmek için kullanılır.
* Lighthouse: Google Chrome’da yerleşik olarak bulunan bu araç, web uygulamalarının performansını, erişilebilirliğini, SEO’sunu ve en iyi uygulamalarını denetler. Bundle boyutu da dahil olmak üzere birçok performans metrikini raporlar.
* Webpack CLI --json çıktısı: webpack --json > stats.json komutuyla doğrudan webpack’ten stats.json dosyası alabilirsiniz. Bu dosya, Bundle Analyzer’ın temelini oluşturur.
Sonuç
Angular uygulamalarınızın performansını optimize etmek, modern web geliştirmenin ayrılmaz bir parçasıdır. webpack Bundle Analyzer, bu süreçte paha biçilmez bir araçtır. Uygulamanızın bundle’larının iç yapısını görsel olarak analiz etmenizi, en büyük katkıda bulunanları belirlemenizi ve potansiyel optimizasyon alanlarını hızla tespit etmenizi sağlar.
Bu makalede ele aldığımız adımları izleyerek – Analyzer’ı Angular CLI projenize entegre etmek, raporları anlamak ve önerilen optimizasyon stratejilerini uygulamak – uygulamanızın yüklenme sürelerini önemli ölçüde iyileştirebilir, kullanıcı deneyimini artırabilir ve arama motorlarındaki sıralamanızı yükseltebilirsiniz. Unutmayın ki performans optimizasyonu tek seferlik bir işlem değil, uygulamanız geliştikçe sürekli olarak yapılması gereken bir süreçtir. webpack Bundle Analyzer’ı düzenli olarak kullanarak, uygulamanızın “diyetini” sürekli kontrol altında tutabilir ve sağlıklı, hızlı bir kullanıcı deneyimi sunmaya devam edebilirsiniz.