Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Code Splitting, Tree Shaking ve Bundle Analizi: Bundle'ı Neyin Şişirdiğini Bulmak
Bundle'ı neyin şişirdiğini tahmin etme, ölç: ng build --stats-json, source-map-explorer, rollup-plugin-visualizer ve webpack-bundle-analyzer paket bazında dağılımı gösterir; tree shaking ise yalnız ESM ve side effect'siz module'lerde çalışır. Bookstore'un Angular uygulamasında lodash'tan named import'un hiçbir şey kazandırmadığını, barrel dosyasının side effect taşıdığını, moment ve lodash'ı çıkarınca main'in 359 kB'tan 224 kB'a indiğini ve Vite'ta vendor chunk kararını görüyoruz.
Build Aracı Neden Var? Module Graph, Transpiling, Bundling, Minification ve Dev Server'ın Görevi
Build aracı, tarayıcının tek başına yapamadığı işi yapar: import'ları çözüp module graph'ı kurar, TypeScript'i çevirir, kullanılmayan kodu atar, dosyaları birleştirip küçültür ve içerikten hash'lenmiş adlar verir. Bookstore'un kitap arama widget'ında bundler'sız ESM'in 642 isteğini, Vite 8 ile 3 isteğe inen çıktıyı, Baseline build target'ını ve dev server ile production build farkını gerçek çıktılarla inceliyoruz.