Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
React Router 8 ile Routing: Route'lar, Nested Layout, URL Parametreleri, Loader/Action ve Lazy Route
React Router 8'in data mode'unda route'lar createBrowserRouter'a object olarak verilir; layout route'u ve Outlet ile iç içe sayfalar, loader ile route'a girmeden önce veri, middleware ile guard, action ile form ve lazy ile code splitting elde edilir. Bookstore'u URL'lere bölüp aramayı query string'e taşıyor, aynı route'ta key'siz state'in sonraki kitaba taşındığını, lazy chunk'ın middleware yönlendirmesinden önce indiğini ve static sunucuda SPA fallback'in neden şart olduğunu gösteriyoruz.
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.