{"id":30673,"date":"2025-09-30T14:41:10","date_gmt":"2025-09-30T11:41:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30673"},"modified":"2025-09-30T14:41:10","modified_gmt":"2025-09-30T11:41:10","slug":"angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/","title":{"rendered":"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme"},"content":{"rendered":"

<\/p>\n

Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme<\/h2>\n

Angular uygulamalar\u0131, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. G\u00fc\u00e7l\u00fc yap\u0131s\u0131, geni\u015f ekosistemi ve performans odakl\u0131 mimarisi sayesinde karma\u015f\u0131k tek sayfa uygulamalar\u0131 (SPA) geli\u015ftirmek i\u00e7in tercih edilir. Ancak, bir uygulaman\u0131n boyutu artt\u0131k\u00e7a, son kullan\u0131c\u0131 deneyimi \u00fczerinde olumsuz etkiler yaratabilecek “paket boyutu” (bundle size) sorunu ortaya \u00e7\u0131kabilir. B\u00fcy\u00fck paket boyutlar\u0131, uygulaman\u0131n y\u00fcklenme s\u00fcresini uzat\u0131r, mobil veri kullan\u0131m\u0131n\u0131 art\u0131r\u0131r ve genel performans\u0131 d\u00fc\u015f\u00fcr\u00fcr. Bu nedenle, Angular uygulamalar\u0131n\u0131z\u0131n paket boyutunu anlamak, analiz etmek ve optimize etmek, ba\u015far\u0131l\u0131 bir \u00fcr\u00fcn geli\u015ftirmenin kritik bir par\u00e7as\u0131d\u0131r.<\/p>\n

Bu makalede, Angular uygulamalar\u0131n\u0131z\u0131n \u00fcretim derlemesi (production build) sonras\u0131 olu\u015fan JavaScript paketlerinin boyutunu detayl\u0131 bir \u015fekilde incelemek i\u00e7in iki g\u00fc\u00e7l\u00fc arac\u0131 ele alaca\u011f\u0131z: webpack Bundle Analyzer<\/code> ve source-map-explorer<\/code>. Bu ara\u00e7lar, uygulaman\u0131z\u0131n hangi k\u0131s\u0131mlar\u0131n\u0131n pakette ne kadar yer kaplad\u0131\u011f\u0131n\u0131 g\u00f6rselle\u015ftirmemize ve bu bilgiyi kullanarak optimizasyon stratejileri geli\u015ftirmemize olanak tan\u0131r. Her iki arac\u0131n kurulumunu, kullan\u0131m\u0131n\u0131, elde edilen verilerin nas\u0131l yorumlanaca\u011f\u0131n\u0131 ve paket boyutunu azaltmaya y\u00f6nelik pratik stratejileri ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n

Neden Paket Boyutu \u00d6nemlidir?<\/h3>\n

Uygulaman\u0131z\u0131n paket boyutunu k\u00fc\u00e7\u00fcltmek, sadece bir optimizasyon g\u00f6revi de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimi, SEO ve operasyonel maliyetler a\u00e7\u0131s\u0131ndan da do\u011frudan etkiye sahip stratejik bir karard\u0131r.<\/p>\n

Sayfa Y\u00fckleme S\u00fcresi ve Kullan\u0131c\u0131 Deneyimi<\/h4>\n

Web uygulamalar\u0131 i\u00e7in ilk izlenim \u00e7ok \u00f6nemlidir. Bir kullan\u0131c\u0131, bir web sitesini ziyaret etti\u011finde, sayfan\u0131n h\u0131zl\u0131 bir \u015fekilde y\u00fcklenmesini bekler. B\u00fcy\u00fck JavaScript paketleri, taray\u0131c\u0131n\u0131n bu dosyalar\u0131 indirmesi, ayr\u0131\u015ft\u0131rmas\u0131 (parsing) ve \u00e7al\u0131\u015ft\u0131rmas\u0131 i\u00e7in daha fazla zaman harcamas\u0131na neden olur. Bu da sayfa y\u00fckleme s\u00fcresini uzat\u0131r. Uzun y\u00fckleme s\u00fcreleri, kullan\u0131c\u0131lar\u0131n sab\u0131rs\u0131zlanmas\u0131na ve uygulamay\u0131 terk etmesine yol a\u00e7abilir. Ara\u015ft\u0131rmalar, sayfa y\u00fckleme s\u00fcresindeki her saniyelik art\u0131\u015f\u0131n d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131nda \u00f6nemli d\u00fc\u015f\u00fc\u015flere neden oldu\u011funu g\u00f6stermektedir. H\u0131zl\u0131 y\u00fcklenen bir uygulama, kullan\u0131c\u0131lar\u0131n daha memnun olmas\u0131n\u0131, daha uzun s\u00fcre kalmas\u0131n\u0131 ve uygulamay\u0131 tekrar ziyaret etmesini sa\u011flar.<\/p>\n

SEO Etkileri<\/h4>\n

Arama motorlar\u0131, web sitelerini s\u0131ralarken sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli bir fakt\u00f6r olarak de\u011ferlendirir. Google gibi arama motorlar\u0131, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek amac\u0131yla h\u0131zl\u0131 y\u00fcklenen sitelere \u00f6ncelik verir. Yava\u015f y\u00fcklenen bir Angular uygulamas\u0131, arama motoru s\u0131ralamalar\u0131nda dezavantajl\u0131 duruma d\u00fc\u015febilir, bu da organik trafik kayb\u0131na neden olabilir. Paket boyutunu optimize etmek, uygulaman\u0131z\u0131n SEO performans\u0131n\u0131 do\u011frudan iyile\u015ftirerek daha fazla g\u00f6r\u00fcn\u00fcrl\u00fck kazanmas\u0131na yard\u0131mc\u0131 olur.<\/p>\n

Mobil Cihazlarda Performans<\/h4>\n

Mobil cihaz kullan\u0131c\u0131lar\u0131, genellikle daha yava\u015f internet ba\u011flant\u0131lar\u0131na ve daha s\u0131n\u0131rl\u0131 i\u015flem g\u00fcc\u00fcne sahiptir. B\u00fcy\u00fck paket boyutlar\u0131, mobil cihazlarda uygulaman\u0131n daha da yava\u015f y\u00fcklenmesine ve \u00e7al\u0131\u015fmas\u0131na neden olabilir. Bu durum, \u00f6zellikle geli\u015fmekte olan \u00fclkelerdeki kullan\u0131c\u0131lar i\u00e7in daha da kritik hale gelir. Mobil cihazlar i\u00e7in optimize edilmi\u015f paket boyutlar\u0131, daha geni\u015f bir kitleye ula\u015fman\u0131z\u0131 ve mobil kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirmenizi sa\u011flar.<\/p>\n

Veri T\u00fcketimi<\/h4>\n

Mobil veri planlar\u0131 s\u0131n\u0131rl\u0131 olabilir. B\u00fcy\u00fck JavaScript paketleri, kullan\u0131c\u0131lar\u0131n mobil veri kotalar\u0131n\u0131 daha h\u0131zl\u0131 t\u00fcketmelerine neden olur. Bu durum, kullan\u0131c\u0131lar i\u00e7in ek maliyet anlam\u0131na gelebilir ve uygulaman\u0131z\u0131n kullan\u0131m\u0131n\u0131 s\u0131n\u0131rlayabilir. Daha k\u00fc\u00e7\u00fck paketler, daha az veri t\u00fcketimi anlam\u0131na gelir ve bu da kullan\u0131c\u0131lar i\u00e7in daha ekonomik bir deneyim sunar.<\/p>\n

Bak\u0131m ve Geli\u015ftirme Maliyetleri<\/h4>\n

B\u00fcy\u00fck ve karma\u015f\u0131k kod tabanlar\u0131, genellikle daha fazla ba\u011f\u0131ml\u0131l\u0131k i\u00e7erir. Bu ba\u011f\u0131ml\u0131l\u0131klar, g\u00fcvenlik a\u00e7\u0131klar\u0131na, uyumluluk sorunlar\u0131na ve geli\u015ftirme s\u00fcrecinde beklenmedik hatalara yol a\u00e7abilir. Paket boyutunu d\u00fczenli olarak analiz etmek ve k\u00fc\u00e7\u00fcltmek, kod taban\u0131n\u0131z\u0131 daha d\u00fczenli ve y\u00f6netilebilir tutman\u0131za yard\u0131mc\u0131 olur, bu da uzun vadede bak\u0131m ve geli\u015ftirme maliyetlerini azalt\u0131r.<\/p>\n

Angular ve Webpack \u0130li\u015fkisi<\/h3>\n

Angular CLI (Command Line Interface), bir Angular projesinin temelini olu\u015fturan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Projelerin olu\u015fturulmas\u0131ndan derlenmesine, test edilmesinden da\u011f\u0131t\u0131m\u0131na kadar bir\u00e7ok g\u00f6revi otomatikle\u015ftirir. Bu otomasyonun \u00f6nemli bir par\u00e7as\u0131 da, uygulaman\u0131z\u0131n kaynak kodunu taray\u0131c\u0131da \u00e7al\u0131\u015ft\u0131r\u0131labilir hale getiren bir “paketleyici” (bundler) olan webpack’tir. Angular CLI, varsay\u0131lan olarak webpack’i dahili olarak kullan\u0131r ve bu sayede geli\u015ftiricilerin webpack yap\u0131land\u0131rmas\u0131yla do\u011frudan u\u011fra\u015fmas\u0131na gerek kalmaz.<\/p>\n

\u00dcretim derlemesi (ng build --prod<\/code> veya ng build --configuration=production<\/code> komutlar\u0131 ile yap\u0131l\u0131r), uygulaman\u0131z\u0131 son kullan\u0131c\u0131lara da\u011f\u0131t\u0131ma haz\u0131r hale getirirken bir dizi optimizasyon uygular:<\/p>\n

* AOT (Ahead-of-Time) Derleme:<\/strong> Angular \u015fablonlar\u0131 ve bile\u015fenleri, taray\u0131c\u0131ya g\u00f6nderilmeden \u00f6nce JavaScript koduna d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr. Bu, taray\u0131c\u0131n\u0131n \u00e7al\u0131\u015fma zaman\u0131nda derleme yapma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r, uygulaman\u0131n daha h\u0131zl\u0131 ba\u015flamas\u0131n\u0131 ve daha iyi performans g\u00f6stermesini sa\u011flar.
\n* Tree-shaking (A\u011fa\u00e7 Sallama):<\/strong> Kullan\u0131lmayan kodlar\u0131 (dead code) tespit eder ve paketlerden \u00e7\u0131kar\u0131r. Bu, \u00f6zellikle b\u00fcy\u00fck \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerden sadece belirli fonksiyonlar\u0131 kulland\u0131\u011f\u0131n\u0131zda paket boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.
\n* Minification ve Uglification:<\/strong> JavaScript, CSS ve HTML dosyalar\u0131ndaki gereksiz bo\u015fluklar\u0131, yorumlar\u0131 ve uzun de\u011fi\u015fken isimlerini kald\u0131rarak dosya boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fclt\u00fcr. Bu, kodun okunabilirli\u011fini azalt\u0131r ancak taray\u0131c\u0131 taraf\u0131ndan daha h\u0131zl\u0131 indirilir ve ayr\u0131\u015ft\u0131r\u0131l\u0131r.
\n* Mod\u00fcl Birle\u015ftirme (Module Concatenation):<\/strong> Webpack’in “Scope Hoisting” \u00f6zelli\u011fi sayesinde, birden fazla mod\u00fcl tek bir fonksiyon blo\u011funda birle\u015ftirilerek paket boyutlar\u0131 daha da k\u00fc\u00e7\u00fclt\u00fcl\u00fcr ve \u00e7al\u0131\u015fma zaman\u0131 performans\u0131 art\u0131r\u0131l\u0131r.<\/p>\n

Bu optimizasyonlar sonucunda, Angular uygulamas\u0131 genellikle birka\u00e7 ana pakete (bundle) ayr\u0131l\u0131r:<\/p>\n

* runtime.js<\/code>:<\/strong> Webpack’in \u00e7al\u0131\u015fma zaman\u0131 kodunu i\u00e7erir.
\n* polyfills.js<\/code>:<\/strong> Taray\u0131c\u0131 uyumlulu\u011fu i\u00e7in gerekli olan polyfill’leri i\u00e7erir.
\n* main.js<\/code>:<\/strong> Uygulaman\u0131z\u0131n ana kodu ve ba\u015flang\u0131\u00e7 mant\u0131\u011f\u0131n\u0131 i\u00e7erir.
\n* vendor.js<\/code>:<\/strong> \u00dc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerini (Angular kendisi, RxJS, vb.) i\u00e7erir. Bu paket genellikle en b\u00fcy\u00fck olan\u0131d\u0131r.
\n* lazy-loaded-module-name.js<\/code>:<\/strong> Tembel y\u00fcklenen (lazy-loaded) mod\u00fcller i\u00e7in ayr\u0131 ayr\u0131 paketler olu\u015fturulur ve sadece ihtiya\u00e7 duyuldu\u011funda y\u00fcklenirler.<\/p>\n

Bu paketlerin her birinin boyutunu anlamak, nerede optimizasyon yapabilece\u011finizi belirlemek i\u00e7in kritik \u00f6neme sahiptir. \u0130\u015fte burada webpack Bundle Analyzer<\/code> ve source-map-explorer<\/code> devreye girer.<\/p>\n

webpack Bundle Analyzer ile Paket Analizi<\/h3>\n

webpack Bundle Analyzer<\/code>, Angular uygulamalar\u0131n\u0131z\u0131n \u00fcretim paketlerinin i\u00e7eri\u011fini g\u00f6rselle\u015ftiren etkile\u015fimli bir ara\u00e7t\u0131r. Uygulaman\u0131z\u0131n nihai JavaScript paketini olu\u015fturan t\u00fcm mod\u00fclleri, ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve bunlar\u0131n her birinin kaplad\u0131\u011f\u0131 alan\u0131 renkli ve hiyerar\u015fik bir treemap grafi\u011fi \u00fczerinde g\u00f6sterir. Bu g\u00f6rselle\u015ftirme sayesinde, uygulaman\u0131z\u0131n en b\u00fcy\u00fck “a\u011f\u0131rl\u0131k kaynaklar\u0131n\u0131” kolayca tespit edebilirsiniz.<\/p>\n

Nedir?<\/h4>\n

webpack Bundle Analyzer<\/code>, webpack taraf\u0131ndan \u00fcretilen stats.json<\/code> dosyas\u0131n\u0131 kullanarak bir web aray\u00fcz\u00fc olu\u015fturur. Bu aray\u00fczde, paketlerinizdeki her bir mod\u00fcl\u00fcn (kendi kodunuz, \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphaneler, resimler vb.) boyutunu ve birbirleriyle olan ili\u015fkilerini g\u00f6rebilirsiniz. Treemap \u00fczerindeki her bir kutu, bir mod\u00fcl\u00fc veya bir mod\u00fcl grubunu temsil eder ve boyutu, pakette kaplad\u0131\u011f\u0131 alanla orant\u0131l\u0131d\u0131r. Kutular\u0131n i\u00e7ine dald\u0131k\u00e7a, daha detayl\u0131 bilgilere ula\u015fabilir, belirli bir k\u00fct\u00fcphanenin veya kendi kodunuzdaki bir dosyan\u0131n neden bu kadar b\u00fcy\u00fck oldu\u011funu anlayabilirsiniz.<\/p>\n

Kurulum ve Kullan\u0131m<\/h4>\n

Angular CLI, varsay\u0131lan olarak webpack yap\u0131land\u0131rmas\u0131na do\u011frudan eri\u015fim sa\u011flamaz. Bu nedenle, webpack Bundle Analyzer<\/code>‘\u0131 Angular projenize entegre etmek i\u00e7in genellikle @angular-builders\/custom-webpack<\/code> gibi bir arac\u0131 kullanmam\u0131z gerekir. Bu builder, Angular CLI’\u0131n webpack yap\u0131land\u0131rmas\u0131n\u0131 geni\u015fletmemize olanak tan\u0131r.<\/p>\n

Ad\u0131m 1: Gerekli Paketleri Kurma<\/strong><\/p>\n

\u00d6ncelikle, custom-webpack<\/code> builder’\u0131 ve webpack-bundle-analyzer<\/code> paketini projenize geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak kurun:<\/p>\n

npm install --save-dev @angular-builders\/custom-webpack webpack-bundle-analyzer\n
veya<\/h2>\nyarn add --dev @angular-builders\/custom-webpack webpack-bundle-analyzer<\/code><\/pre>\n
Ad\u0131m 2: angular.json Dosyas\u0131n\u0131 Yap\u0131land\u0131rma<\/strong><\/p>\n
angular.json<\/code> dosyan\u0131zda, uygulaman\u0131z\u0131n architect.build<\/code> ve architect.serve<\/code> k\u0131s\u0131mlar\u0131ndaki builder<\/code> alan\u0131n\u0131 custom-webpack<\/code> builder’\u0131n\u0131 kullanacak \u015fekilde de\u011fi\u015ftirmeniz gerekir. Ayr\u0131ca, \u00f6zel webpack yap\u0131land\u0131rma dosyan\u0131z\u0131n yolunu belirtmelisiniz.<\/p>\n
{\n  \"projects\": {\n    \"your-project-name\": {\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-builders\/custom-webpack:browser\",\n          \"options\": {\n            \"customWebpackConfig\": {\n              \"path\": \".\/webpack.config.js\" \/\/ \u00d6zel webpack config dosyan\u0131z\u0131n yolu\n            },\n            \"outputPath\": \"dist\/your-project-name\",\n            \"index\": \"src\/index.html\",\n            \"main\": \"src\/main.ts\",\n            \"polyfills\": \"src\/polyfills.ts\",\n            \"tsConfig\": \"tsconfig.app.json\",\n            \"assets\": [\n              \"src\/favicon.ico\",\n              \"src\/assets\"\n            ],\n            \"styles\": [\n              \"src\/styles.scss\"\n            ],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"production\": {\n              \/\/ ... di\u011fer \u00fcretim ayarlar\u0131 ...\n              \"optimization\": true,\n              \"outputHashing\": \"all\",\n              \"sourceMap\": true, \/\/ Analiz i\u00e7in source map'ler \u00f6nemli olabilir\n              \"namedChunks\": false,\n              \"extractLicenses\": true,\n              \"vendorChunk\": false,\n              \"buildOptimizer\": true,\n              \"budgets\": [\n                {\n                  \"type\": \"initial\",\n                  \"maximumWarning\": \"500kb\",\n                  \"maximumError\": \"1mb\"\n                },\n                {\n                  \"type\": \"anyComponentStyle\",\n                  \"maximumWarning\": \"2kb\",\n                  \"maximumError\": \"4kb\"\n                }\n              ]\n            }\n          }\n        },\n        \"serve\": {\n          \"builder\": \"@angular-builders\/custom-webpack:dev-server\",\n          \"options\": {\n            \"browserTarget\": \"your-project-name:build\"\n          },\n          \"configurations\": {\n            \"production\": {\n              \"browserTarget\": \"your-project-name:build:production\"\n            }\n          }\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
Ad\u0131m 3: webpack.config.js Dosyas\u0131n\u0131 Olu\u015fturma<\/strong><\/p>\n
Projenizin k\u00f6k dizininde webpack.config.js<\/code> ad\u0131nda bir dosya olu\u015fturun ve i\u00e7ine webpack-bundle-analyzer<\/code> eklentisini ekleyin:<\/p>\n
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nmodule.exports = {\n  plugins: [\n    new BundleAnalyzerPlugin({\n      analyzerMode: 'static', \/\/ 'static' ile HTML dosyas\u0131 olu\u015fturur, 'server' ile bir sunucu ba\u015flat\u0131r\n      reportFilename: 'bundle-report.html', \/\/ Rapor dosyas\u0131n\u0131n ad\u0131\n      openAnalyzer: false \/\/ Taray\u0131c\u0131y\u0131 otomatik a\u00e7mas\u0131n\n    })\n  ]\n};<\/code><\/pre>\n
Ad\u0131m 4: Uygulamay\u0131 Derleme ve Analiz Etme<\/strong><\/p>\n
\u015eimdi, uygulaman\u0131z\u0131 \u00fcretim modunda derleyin. webpack-bundle-analyzer<\/code> eklentisi otomatik olarak bir rapor dosyas\u0131 olu\u015fturacakt\u0131r:<\/p>\n
ng build --configuration=production<\/code><\/pre>\n
Derleme tamamland\u0131ktan sonra, dist\/your-project-name\/bundle-report.html<\/code> yolunda bir HTML dosyas\u0131 bulacaks\u0131n\u0131z. Bu dosyay\u0131 taray\u0131c\u0131n\u0131zda a\u00e7arak interaktif treemap g\u00f6rselle\u015ftirmesini g\u00f6r\u00fcnt\u00fcleyebilirsiniz. E\u011fer openAnalyzer: true<\/code> olarak ayarlad\u0131ysan\u0131z, derleme bitti\u011finde otomatik olarak taray\u0131c\u0131da a\u00e7\u0131lacakt\u0131r.<\/p>\n
Alternatif olarak, ng-bundle-analyzer<\/code> gibi daha basit bir CLI arac\u0131 da kullanabilirsiniz. Bu ara\u00e7, custom-webpack<\/code> yap\u0131land\u0131rmas\u0131na gerek kalmadan do\u011frudan stats.json<\/code> dosyas\u0131n\u0131 \u00fcreterek analiz yapman\u0131z\u0131 sa\u011flar:<\/p>\n
npm install --save-dev ng-bundle-analyzer\n
veya<\/h2>\nyarn add --dev ng-bundle-analyzer<\/code><\/pre>\n
package.json<\/code> dosyan\u0131za bir script ekleyin:<\/p>\n
{\n  \"scripts\": {\n    \"analyze\": \"ng build --configuration=production --stats-json && ng-bundle-analyzer\"\n  }\n}<\/code><\/pre>\n
Ard\u0131ndan, npm run analyze<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak analiz raporunu taray\u0131c\u0131n\u0131zda g\u00f6r\u00fcnt\u00fcleyebilirsiniz.<\/p>\n
Analiz Sonu\u00e7lar\u0131n\u0131 Yorumlama<\/h4>\n
webpack Bundle Analyzer<\/code> raporu, uygulaman\u0131z\u0131n paket boyutunu azaltmak i\u00e7in hangi alanlara odaklanman\u0131z gerekti\u011fini net bir \u015fekilde g\u00f6sterir:<\/p>\n
*   B\u00fcy\u00fck Kutular:<\/strong> Treemap’teki en b\u00fcy\u00fck kutular, uygulaman\u0131z\u0131n en \u00e7ok yer kaplayan mod\u00fcllerini veya k\u00fct\u00fcphanelerini temsil eder. Bu kutular\u0131n \u00fczerine gelerek veya t\u0131klayarak daha detayl\u0131 bilgilere ula\u015fabilirsiniz. \u00d6rne\u011fin, node_modules<\/code> klas\u00f6r\u00fc alt\u0131ndaki b\u00fcy\u00fck bir k\u00fct\u00fcphane (lodash, moment.js, Angular Material’\u0131n tamam\u0131 vb.) hemen dikkat \u00e7ekecektir.
\n*   Tekrar Eden Ba\u011f\u0131ml\u0131l\u0131klar:<\/strong> Bazen farkl\u0131 k\u00fct\u00fcphaneler ayn\u0131 ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n farkl\u0131 versiyonlar\u0131n\u0131 i\u00e7e aktarabilir veya siz fark\u0131nda olmadan ayn\u0131 k\u00fct\u00fcphaneyi birden fazla yerde tam olarak i\u00e7e aktarabilirsiniz. Bu durum, paketin gereksiz yere b\u00fcy\u00fcmesine neden olur. Analyzer, bu t\u00fcr tekrar eden ba\u011f\u0131ml\u0131l\u0131klar\u0131 belirlemenize yard\u0131mc\u0131 olabilir.
\n*   Gereksiz Ba\u011f\u0131ml\u0131l\u0131klar:<\/strong> Uygulaman\u0131zda art\u0131k kullan\u0131lmayan ancak hala package.json<\/code> dosyan\u0131zda bulunan veya yanl\u0131\u015fl\u0131kla i\u00e7e aktar\u0131lm\u0131\u015f k\u00fct\u00fcphaneler olabilir. Bu k\u00fct\u00fcphaneler, paketinize gereksiz y\u00fck bindirir.
\n*   Kendi Kodunuzdaki B\u00fcy\u00fck Mod\u00fcller:<\/strong> Kendi yazd\u0131\u011f\u0131n\u0131z kodun da b\u00fcy\u00fck mod\u00fcller olu\u015fturabilece\u011fini unutmay\u0131n. \u00d6zellikle b\u00fcy\u00fck, monolitik bile\u015fenler veya servisler, paketin \u00f6nemli bir k\u0131sm\u0131n\u0131 olu\u015fturabilir.<\/p>\n
\u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h4>\n
*   Detayl\u0131 \u0130nceleme:<\/strong> B\u00fcy\u00fck kutular\u0131 belirledikten sonra, bunlar\u0131n neden bu kadar b\u00fcy\u00fck oldu\u011funu ara\u015ft\u0131r\u0131n. Bir k\u00fct\u00fcphanenin tamam\u0131na ger\u00e7ekten ihtiyac\u0131n\u0131z var m\u0131, yoksa sadece belirli fonksiyonlar\u0131n\u0131 m\u0131 kullan\u0131yorsunuz?
\n*   Lazy Loading Etkisi:<\/strong> Tembel y\u00fcklenen (lazy-loaded) mod\u00fcllerin ayr\u0131 paketler halinde g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc fark edeceksiniz. Bu, ana paketin boyutunu k\u00fc\u00e7\u00fcltt\u00fc\u011f\u00fcn\u00fcz\u00fc ve kullan\u0131c\u0131 deneyimini iyile\u015ftirdi\u011finizi g\u00f6sterir.
\n*   Zamanla Takip:<\/strong> Paket boyutunu d\u00fczenli olarak analiz etmek ve zaman i\u00e7indeki de\u011fi\u015fiklikleri takip etmek \u00f6nemlidir. Yeni \u00f6zellikler eklendik\u00e7e veya k\u00fct\u00fcphaneler g\u00fcncellendik\u00e7e paket boyutu artabilir. Otomatik CI\/CD s\u00fcre\u00e7lerinize analiz ad\u0131m\u0131n\u0131 dahil etmek, regresyonlar\u0131 erken tespit etmenizi sa\u011flar.<\/p>\n
source-map-explorer ile Derinlemesine \u0130nceleme<\/h3>\n
webpack Bundle Analyzer<\/code> genel paket yap\u0131s\u0131n\u0131 ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 g\u00f6rselle\u015ftirirken, source-map-explorer<\/code> daha mikro d\u00fczeyde bir analiz sunar. \u00dcretim derlemesi s\u0131ras\u0131nda olu\u015fturulan kaynak haritalar\u0131 (source maps) kullanarak, s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f ve birle\u015ftirilmi\u015f JavaScript dosyalar\u0131ndaki her bir bayt\u0131n orijinal kaynak kodunuzdaki hangi sat\u0131r veya fonksiyona ait oldu\u011funu g\u00f6sterir. Bu, \u00f6zellikle kendi kodunuzdaki b\u00fcy\u00fck fonksiyonlar\u0131, bile\u015fenleri veya kullan\u0131lmayan kodlar\u0131 tespit etmek i\u00e7in \u00e7ok de\u011ferli bir ara\u00e7t\u0131r.<\/p>\n
Nedir?<\/h4>\n
source-map-explorer<\/code>, derlenmi\u015f JavaScript dosyalar\u0131n\u0131z\u0131n ve bunlarla ili\u015fkilendirilmi\u015f kaynak haritalar\u0131n\u0131n bir analizini yaparak, her bir orijinal kaynak dosyas\u0131n\u0131n ve hatta dosya i\u00e7indeki fonksiyon veya de\u011fi\u015fkenlerin ne kadar yer kaplad\u0131\u011f\u0131n\u0131 g\u00f6steren etkile\u015fimli bir treemap veya JSON \u00e7\u0131kt\u0131s\u0131 olu\u015fturur. webpack Bundle Analyzer<\/code> mod\u00fcl d\u00fczeyinde \u00e7al\u0131\u015f\u0131rken, source-map-explorer<\/code> dosya ve hatta fonksiyon d\u00fczeyinde bir analiz sunarak, kodunuzun hangi spesifik par\u00e7alar\u0131n\u0131n paketin boyutunu art\u0131rd\u0131\u011f\u0131n\u0131 anlaman\u0131za yard\u0131mc\u0131 olur.<\/p>\n
Kurulum ve Kullan\u0131m<\/h4>\n
source-map-explorer<\/code>‘\u0131 kullanmak i\u00e7in \u00f6ncelikle onu projenize geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olarak kurman\u0131z gerekir:<\/p>\n
npm install --save-dev source-map-explorer\n
veya<\/h2>\nyarn add --dev source-map-explorer<\/code><\/pre>\n
Ad\u0131m 1: Kaynak Haritalar\u0131 ile \u00dcretim Derlemesi<\/strong><\/p>\n
source-map-explorer<\/code>‘\u0131n \u00e7al\u0131\u015fabilmesi i\u00e7in Angular uygulaman\u0131z\u0131 kaynak haritalar\u0131 (source maps) ile derlemeniz gerekir. Varsay\u0131lan olarak, \u00fcretim derlemesinde kaynak haritalar\u0131 kapal\u0131 olabilir veya farkl\u0131 bir formatta \u00fcretilebilir. angular.json<\/code> dosyas\u0131nda sourceMap<\/code> ayar\u0131n\u0131 true<\/code> olarak ayarlayarak veya ng build<\/code> komutuna --source-map<\/code> bayra\u011f\u0131n\u0131 ekleyerek bunu sa\u011flayabilirsiniz:<\/p>\n
ng build --configuration=production --source-map<\/code><\/pre>\n
Bu komut, dist\/your-project-name<\/code> dizinine .js<\/code> dosyalar\u0131n\u0131n yan\u0131 s\u0131ra bunlara kar\u015f\u0131l\u0131k gelen .js.map<\/code> dosyalar\u0131n\u0131 da olu\u015fturacakt\u0131r.<\/p>\n
Ad\u0131m 2: source-map-explorer’\u0131 \u00c7al\u0131\u015ft\u0131rma<\/strong><\/p>\n
source-map-explorer<\/code>‘\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in, ona derlenmi\u015f JavaScript dosyalar\u0131n\u0131z\u0131n yolunu ve bunlara kar\u015f\u0131l\u0131k gelen kaynak haritalar\u0131n\u0131n yolunu belirtmeniz gerekir. Genellikle t\u00fcm JavaScript dosyalar\u0131n\u0131 ve haritalar\u0131n\u0131 hedeflemek istersiniz.<\/p>\n
package.json<\/code> dosyan\u0131za bir script eklemek en pratik yoldur:<\/p>\n
{\n  \"scripts\": {\n    \"explore\": \"ng build --configuration=production --source-map && source-map-explorer 'dist\/<\/em>\/*.js'\"\n  }\n}<\/code><\/pre>\n
Ard\u0131ndan, bu script’i \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
npm run explore<\/code><\/pre>\n
Bu komut, varsay\u0131lan olarak taray\u0131c\u0131n\u0131zda etkile\u015fimli bir treemap g\u00f6rselle\u015ftirmesi a\u00e7acakt\u0131r. --html<\/code> bayra\u011f\u0131n\u0131 kullanarak HTML raporu olu\u015fturabilir veya --json<\/code> bayra\u011f\u0131 ile bir JSON \u00e7\u0131kt\u0131s\u0131 alabilirsiniz.<\/p>\n
# HTML raporu olu\u015fturmak i\u00e7in\nsource-map-explorer 'dist\/<\/em>\/*.js' --html report.html\n\n
JSON \u00e7\u0131kt\u0131s\u0131 almak i\u00e7in<\/h2>\nsource-map-explorer 'dist\/<\/em>\/*.js' --json report.json<\/code><\/pre>\n
Analiz Sonu\u00e7lar\u0131n\u0131 Yorumlama<\/h4>\n
source-map-explorer<\/code> taraf\u0131ndan olu\u015fturulan treemap, webpack Bundle Analyzer<\/code>‘a benzer bir g\u00f6rselle\u015ftirme sunar, ancak daha gran\u00fclerdir. Burada g\u00f6rd\u00fc\u011f\u00fcn\u00fcz kutular, genellikle orijinal TypeScript\/JavaScript dosyalar\u0131n\u0131zdaki fonksiyonlar\u0131, s\u0131n\u0131flar\u0131 veya hatta belirli kod bloklar\u0131n\u0131 temsil eder.<\/p>\n
*   Kendi Kodunuzdaki B\u00fcy\u00fck Dosyalar\/Fonksiyonlar:<\/strong> Treemap’te kendi kaynak kodunuzdaki (src\/app<\/code> veya src\/environments<\/code> gibi) b\u00fcy\u00fck dosyalar\u0131 veya fonksiyonlar\u0131 aray\u0131n. Belirli bir bile\u015fenin veya servisin beklenenden daha b\u00fcy\u00fck oldu\u011funu fark edebilirsiniz. Bu, o bile\u015fenin \u00e7ok fazla mant\u0131k i\u00e7erdi\u011fini, gereksiz ba\u011f\u0131ml\u0131l\u0131klar\u0131 oldu\u011funu veya optimize edilmesi gereken bir yap\u0131ya sahip oldu\u011funu g\u00f6sterebilir.
\n*   Kullan\u0131lmayan Kod (Dead Code):<\/strong> E\u011fer bir dosya veya fonksiyon treemap’te g\u00f6r\u00fcn\u00fcyorsa ancak uygulaman\u0131zda hi\u00e7bir yerde \u00e7a\u011fr\u0131lm\u0131yorsa, bu “dead code” olabilir. Webpack’in tree-shaking \u00f6zelli\u011fi genellikle bu t\u00fcr kodlar\u0131 kald\u0131rsa da, baz\u0131 durumlarda (\u00f6zellikle yan etkileri olan k\u00fct\u00fcphaneler veya yanl\u0131\u015f i\u00e7e aktar\u0131mlar nedeniyle) g\u00f6zden ka\u00e7abilir.
\n*   K\u00fct\u00fcphanelerin Belirli K\u0131s\u0131mlar\u0131:<\/strong> \u00dc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerin sadece belirli k\u0131s\u0131mlar\u0131n\u0131 i\u00e7e aktard\u0131\u011f\u0131n\u0131z\u0131 d\u00fc\u015f\u00fcnseniz bile, source-map-explorer<\/code> o k\u00fct\u00fcphanenin ne kadar\u0131n\u0131n paketinize dahil edildi\u011fini g\u00f6rmenizi sa\u011flar. \u00d6rne\u011fin, bir UI k\u00fct\u00fcphanesinden sadece bir veya iki bile\u015fen kullan\u0131yorsan\u0131z, ancak treemap’te o k\u00fct\u00fcphanenin tamam\u0131n\u0131n b\u00fcy\u00fck bir yer kaplad\u0131\u011f\u0131n\u0131 g\u00f6r\u00fcyorsan\u0131z, bu mod\u00fcler i\u00e7e aktar\u0131m stratejinizin yetersiz oldu\u011funu g\u00f6sterebilir.<\/p>\n
\u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h4>\n
*   Refactoring:<\/strong> Kendi kodunuzdaki b\u00fcy\u00fck fonksiyonlar\u0131 veya s\u0131n\u0131flar\u0131 daha k\u00fc\u00e7\u00fck, daha odakl\u0131 par\u00e7alara ay\u0131rarak refactor edin. Bu, hem kodun okunabilirli\u011fini art\u0131r\u0131r hem de tree-shaking i\u00e7in daha fazla f\u0131rsat yarat\u0131r.
\n*   Gereksiz \u0130\u00e7e Aktar\u0131mlar\u0131 Kald\u0131rma:<\/strong> Kullanmad\u0131\u011f\u0131n\u0131z import<\/code> ifadelerini veya package.json<\/code> ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 kald\u0131r\u0131n.
\n*   Mod\u00fcler K\u00fct\u00fcphane Kullan\u0131m\u0131:<\/strong> K\u00fct\u00fcphanelerin tamam\u0131n\u0131 i\u00e7e aktarmak yerine, sadece ihtiya\u00e7 duydu\u011funuz belirli mod\u00fclleri, bile\u015fenleri veya fonksiyonlar\u0131 i\u00e7e aktar\u0131n. \u00d6rne\u011fin:
\n    *   RxJS i\u00e7in: import { map } from 'rxjs\/operators';<\/code> yerine import { map } from 'rxjs';<\/code> ve ard\u0131ndan pipe(map(...))<\/code> kullanmak.
\n    *   Angular Material i\u00e7in: Sadece kulland\u0131\u011f\u0131n\u0131z mod\u00fclleri app.module.ts<\/code>‘ye i\u00e7e aktar\u0131n (\u00f6rn. MatButtonModule<\/code>, MatCardModule<\/code>).
\n       Lodash i\u00e7in: import get from 'lodash\/get';<\/code> yerine import <\/em> as _ from 'lodash';<\/code> kullanmay\u0131n.
\n*   \u00d6\u011feler Aras\u0131 Ba\u011flant\u0131lar\u0131 Anlama:<\/strong> source-map-explorer<\/code>, kodunuzun farkl\u0131 b\u00f6l\u00fcmlerinin nas\u0131l bir araya geldi\u011fini anlaman\u0131za yard\u0131mc\u0131 olur. Bu, \u00f6zellikle karma\u015f\u0131k bir mimariye sahip uygulamalarda, ba\u011f\u0131ml\u0131l\u0131k d\u00f6ng\u00fclerini veya beklenmedik b\u00fcy\u00fck ba\u011f\u0131ml\u0131l\u0131klar\u0131 tespit etmek i\u00e7in faydal\u0131d\u0131r.<\/p>\n
Paket Boyutunu Azaltma Stratejileri<\/h3>\n
Analiz ara\u00e7lar\u0131 sayesinde uygulaman\u0131z\u0131n zay\u0131f noktalar\u0131n\u0131 belirledikten sonra, s\u0131ra paket boyutunu azaltmaya y\u00f6nelik pratik stratejileri uygulamaya gelir. Bu stratejiler genellikle birbiriyle ili\u015fkili ve birka\u00e7\u0131 bir arada kullan\u0131ld\u0131\u011f\u0131nda en iyi sonu\u00e7lar\u0131 verir.<\/p>\n
Lazy Loading (Tembel Y\u00fckleme)<\/h4>\n
Lazy loading, Angular uygulamalar\u0131nda paket boyutunu azaltman\u0131n en etkili yollar\u0131ndan biridir. Bu teknik, bir mod\u00fcl\u00fcn veya bile\u015fenin sadece kullan\u0131c\u0131 taraf\u0131ndan ihtiya\u00e7 duyuldu\u011funda (\u00f6rne\u011fin, belirli bir rotaya gidildi\u011finde) y\u00fcklenmesini sa\u011flar. Bu sayede, uygulaman\u0131n ilk y\u00fckleme s\u00fcresi k\u0131sal\u0131r \u00e7\u00fcnk\u00fc ba\u015flang\u0131\u00e7ta sadece temel mod\u00fcller indirilir.<\/p>\n
*   Nas\u0131l Yap\u0131l\u0131r:<\/strong> Angular’da RouterModule<\/code> ile loadChildren<\/code> \u00f6zelli\u011fini kullanarak mod\u00fclleri tembel y\u00fckleyebilirsiniz. \u00d6rne\u011fin:<\/p>\n
const routes: Routes = [\n      {\n        path: 'admin',\n        loadChildren: () => import('.\/admin\/admin.module').then(m => m.AdminModule)\n      },\n      \/\/ ... di\u011fer rotalar\n    ];<\/code><\/pre>\n
    Bu, AdminModule<\/code>‘\u00fcn sadece kullan\u0131c\u0131 \/admin<\/code> rotas\u0131na gitti\u011finde y\u00fcklenmesini sa\u011flar.<\/p>\n
Tree-shaking ve Dead Code Elimination<\/h4>\n
Tree-shaking, webpack’in ve Angular AOT derleyicisinin ortakla\u015fa \u00e7al\u0131\u015ft\u0131\u011f\u0131 bir optimizasyon tekni\u011fidir. Kullan\u0131lmayan veya “\u00f6l\u00fc” kodlar\u0131 (dead code) nihai \u00fcretim paketinden \u00e7\u0131kar\u0131r.<\/p>\n
*   Nas\u0131l Etkinle\u015ftirilir:<\/strong> Angular CLI, \u00fcretim derlemesi s\u0131ras\u0131nda ( --configuration=production<\/code> veya --prod<\/code>) tree-shaking’i otomatik olarak etkinle\u015ftirir.
\n*   En \u0130yi Uygulamalar:<\/strong>
\n    *   K\u00fct\u00fcphaneleri mod\u00fcler bir \u015fekilde i\u00e7e aktar\u0131n (\u00f6rne\u011fin, lodash\/get<\/code> yerine lodash<\/code>‘in tamam\u0131).
\n    *   Yan etkisi olmayan (side-effect free) k\u00fct\u00fcphaneleri tercih edin. Bir k\u00fct\u00fcphanenin package.json<\/code> dosyas\u0131nda sideEffects: false<\/code> veya belirli dosyalar\u0131 i\u015faret eden bir dizi varsa, webpack bu k\u00fct\u00fcphaneyi daha agresif bir \u015fekilde tree-shake edebilir.
\n    *   Kendi kodunuzda kullanmad\u0131\u011f\u0131n\u0131z fonksiyonlar\u0131, s\u0131n\u0131flar\u0131 veya de\u011fi\u015fkenleri kald\u0131r\u0131n.<\/p>\n
Gereksiz Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Kald\u0131rma<\/h4>\n
Projenizde art\u0131k kullan\u0131lmayan npm<\/code> paketlerini belirleyin ve kald\u0131r\u0131n. Bazen bir k\u00fct\u00fcphaneyi test ama\u00e7l\u0131 kurars\u0131n\u0131z ve sonra kullanmaktan vazge\u00e7ersiniz, ancak onu package.json<\/code> dosyan\u0131zdan kald\u0131rmay\u0131 unutursunuz.<\/p>\n
*   Nas\u0131l Belirlenir:<\/strong> webpack Bundle Analyzer<\/code> veya source-map-explorer<\/code> raporlar\u0131nda b\u00fcy\u00fck yer kaplayan ancak uygulaman\u0131zda aktif olarak kullan\u0131lmayan k\u00fct\u00fcphaneleri aray\u0131n.
\n*   Kald\u0131rma:<\/strong> npm uninstall <\/code> veya yarn remove <\/code> komutlar\u0131yla kald\u0131rabilirsiniz.<\/p>\n
Mod\u00fcler \u0130\u00e7e Aktar\u0131m (Modular Imports)<\/h4>\n
Bir\u00e7ok modern k\u00fct\u00fcphane, sadece ihtiya\u00e7 duyulan k\u0131s\u0131mlar\u0131n\u0131 i\u00e7e aktarma imkan\u0131 sunar. T\u00fcm k\u00fct\u00fcphaneyi i\u00e7e aktarmak yerine, sadece kulland\u0131\u011f\u0131n\u0131z mod\u00fclleri veya fonksiyonlar\u0131 i\u00e7e aktararak paket boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde azaltabilirsiniz.<\/p>\n
*   \u00d6rnekler:<\/strong>
\n    *   Angular Material:<\/strong> import { MatButtonModule } from '@angular\/material\/button';<\/code> yerine import { MatButtonModule, MatCardModule, MatInputModule } from '@angular\/material';<\/code> kullanmak.
\n    *   RxJS:<\/strong> Operat\u00f6rleri ayr\u0131 ayr\u0131 i\u00e7e aktar\u0131n: import { map, filter } from 'rxjs\/operators';<\/code>
\n    *   Lodash:<\/strong> import { get, debounce } from 'lodash';<\/code> yerine import get from 'lodash\/get'; import debounce from 'lodash\/debounce';<\/code><\/p>\n
Resim ve Medya Optimizasyonu<\/h4>\n
JavaScript paketleri d\u0131\u015f\u0131nda, resimler ve di\u011fer medya dosyalar\u0131 da uygulaman\u0131z\u0131n toplam boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.<\/p>\n
*   S\u0131k\u0131\u015ft\u0131rma:<\/strong> Resimleri s\u0131k\u0131\u015ft\u0131rma ara\u00e7lar\u0131yla optimize edin (\u00f6rne\u011fin, TinyPNG, ImageOptim).
\n*   Do\u011fru Format:<\/strong> WebP gibi modern resim formatlar\u0131n\u0131 kullan\u0131n. Bu formatlar, JPEG veya PNG’ye g\u00f6re daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunar.
\n*   Responsive Resimler:<\/strong> Farkl\u0131 ekran boyutlar\u0131 i\u00e7in farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerde resimler sunarak, k\u00fc\u00e7\u00fck ekranlarda gereksiz yere b\u00fcy\u00fck resimler indirilmesini \u00f6nleyin.
\n*   SVG Kullan\u0131m\u0131:<\/strong> Vekt\u00f6rel grafikler i\u00e7in SVG kullan\u0131n; bunlar genellikle daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131na sahiptir ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten ba\u011f\u0131ms\u0131zd\u0131r.<\/p>\n
S\u0131k\u0131\u015ft\u0131rma (Gzip\/Brotli)<\/h4>\n
Sunucu taraf\u0131nda Gzip veya Brotli s\u0131k\u0131\u015ft\u0131rmas\u0131n\u0131 etkinle\u015ftirmek, taray\u0131c\u0131ya g\u00f6nderilen dosyalar\u0131n boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Bu, paket boyutunu fiziksel olarak k\u00fc\u00e7\u00fcltmese de, a\u011f \u00fczerinden aktar\u0131lan veri miktar\u0131n\u0131 azalt\u0131r ve y\u00fckleme s\u00fcrelerini h\u0131zland\u0131r\u0131r.<\/p>\n
*   Nas\u0131l Etkinle\u015ftirilir:<\/strong> Web sunucunuzda (Nginx, Apache, Express.js vb.) bu s\u0131k\u0131\u015ft\u0131rma algoritmalar\u0131n\u0131 etkinle\u015ftirmeniz gerekir. Angular CLI’\u0131n ng build<\/code> komutu, s\u0131k\u0131\u015ft\u0131r\u0131lmam\u0131\u015f dosyalar\u0131 \u00fcretir; s\u0131k\u0131\u015ft\u0131rma sunucu taraf\u0131nda yap\u0131l\u0131r.<\/p>\n
\u00dcretim Ortam\u0131 Optimizasyonlar\u0131<\/h4>\n
Angular CLI, \u00fcretim derlemesi i\u00e7in bir dizi varsay\u0131lan optimizasyon sunar. Bunlar\u0131n tam olarak etkin oldu\u011fundan emin olun.<\/p>\n
*   angular.json<\/code> Ayarlar\u0131:<\/strong> angular.json<\/code> dosyas\u0131ndaki production<\/code> yap\u0131land\u0131rmas\u0131nda optimization<\/code>, buildOptimizer<\/code>, outputHashing<\/code>, namedChunks<\/code>, extractLicenses<\/code> gibi ayarlar\u0131n do\u011fru \u015fekilde yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131ndan emin olun. \u00d6zellikle optimization: true<\/code> ve buildOptimizer: true<\/code> en iyi performans\u0131 sa\u011flar.
\n*   \u00d6nbellekleme (Caching):<\/strong> Taray\u0131c\u0131 \u00f6nbelleklemesini ve CDN (Content Delivery Network) kullan\u0131m\u0131n\u0131 etkinle\u015ftirerek, kullan\u0131c\u0131lar\u0131n uygulaman\u0131z\u0131 tekrar ziyaret ettiklerinde dosyalar\u0131 yeniden indirmesini \u00f6nleyebilirsiniz. outputHashing: \"all\"<\/code> ayar\u0131, dosyalar\u0131n i\u00e7eri\u011fi de\u011fi\u015fti\u011finde taray\u0131c\u0131lar\u0131n yeni versiyonlar\u0131 indirmesini garanti eder.<\/p>\n
Cache Stratejileri<\/h4>\n
Taray\u0131c\u0131 \u00f6nbelleklemesi, bir uygulaman\u0131n daha sonraki ziyaretlerde daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. Angular uygulamalar\u0131nda, servis i\u015f\u00e7ileri (Service Workers) kullanarak \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekleme ve an\u0131nda y\u00fckleme (instant loading) gibi geli\u015fmi\u015f \u00f6nbellekleme stratejileri uygulayabilirsiniz.<\/p>\n
*   Angular PWA:<\/strong> Angular CLI, ng add @angular\/pwa<\/code> komutuyla kolayca bir servis i\u015f\u00e7isi eklemenize olanak tan\u0131r. Bu, uygulaman\u0131z\u0131n a\u011fdan ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015fmas\u0131n\u0131 ve kaynaklar\u0131 verimli bir \u015fekilde \u00f6nbelle\u011fe almas\u0131n\u0131 sa\u011flar.<\/p>\n
Sonu\u00e7<\/h3>\n
Angular uygulamalar\u0131n\u0131n paket boyutunu analiz etmek ve optimize etmek, modern web geli\u015ftirmenin ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. Kullan\u0131c\u0131 deneyimini iyile\u015ftirmek, SEO performans\u0131n\u0131 art\u0131rmak ve operasyonel maliyetleri d\u00fc\u015f\u00fcrmek i\u00e7in bu s\u00fcre\u00e7lere s\u00fcrekli yat\u0131r\u0131m yapmak \u00f6nemlidir. webpack Bundle Analyzer<\/code> ve source-map-explorer<\/code> gibi g\u00fc\u00e7l\u00fc ara\u00e7lar, uygulaman\u0131z\u0131n “a\u011f\u0131rl\u0131k kaynaklar\u0131n\u0131” belirlemenize ve do\u011fru optimizasyon stratejilerini uygulaman\u0131za olanak tan\u0131r.<\/p>\n
Bu makalede ele ald\u0131\u011f\u0131m\u0131z ad\u0131mlar\u0131 ve stratejileri uygulayarak, daha h\u0131zl\u0131, daha verimli ve kullan\u0131c\u0131 dostu Angular uygulamalar\u0131 geli\u015ftirebilirsiniz. Unutmay\u0131n ki paket boyutu analizi, tek seferlik bir g\u00f6rev de\u011fil, uygulaman\u0131z\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca d\u00fczenli olarak tekrarlanmas\u0131 gereken s\u00fcrekli bir s\u00fcre\u00e7tir. Yeni \u00f6zellikler eklendik\u00e7e, ba\u011f\u0131ml\u0131l\u0131klar g\u00fcncellendik\u00e7e veya kod taban\u0131 b\u00fcy\u00fcd\u00fck\u00e7e, paket boyutunun de\u011fi\u015fti\u011fini ve yeni optimizasyon f\u0131rsatlar\u0131n\u0131n ortaya \u00e7\u0131kt\u0131\u011f\u0131n\u0131 g\u00f6receksiniz. Bu ara\u00e7lar\u0131 kullanarak uygulaman\u0131z\u0131n performans\u0131n\u0131 s\u00fcrekli olarak izlemek, rekabet\u00e7i kalmak ve kullan\u0131c\u0131lar\u0131n\u0131za en iyi deneyimi sunmak i\u00e7in kritik \u00f6neme sahiptir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme\nAngular uygulamalar\u0131, modern web geli\u015ftirmenin","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-30673","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nAngular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme\" \/>\n<meta property=\"og:description\" content=\"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme Angular uygulamalar\u0131, modern web geli\u015ftirmenin\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-30T11:41:10+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme\",\"datePublished\":\"2025-09-30T11:41:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/\"},\"wordCount\":3754,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Angular\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/\",\"name\":\"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-30T11:41:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme","og_description":"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme Angular uygulamalar\u0131, modern web geli\u015ftirmenin","og_url":"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-30T11:41:10+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"21 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme","datePublished":"2025-09-30T11:41:10+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/"},"wordCount":3754,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Angular"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/","url":"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/","name":"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-30T11:41:10+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angular-uygulama-paket-boyutlarini-webpack-bundle-analyzer-ve-source-map-explorer-ile-analiz-etme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Uygulama Paket Boyutlar\u0131n\u0131 webpack Bundle Analyzer ve source-map-explorer ile Analiz Etme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=30673"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30673\/revisions"}],"predecessor-version":[{"id":30674,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30673\/revisions\/30674"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}