Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Routing with React Router 8: Routes, Nested Layouts, URL Params, Loaders/Actions and Lazy Routes
In React Router 8's data mode, routes are passed to createBrowserRouter as objects; layout routes and Outlet give nested pages, loaders fetch data before entering a route, middleware acts as a guard, actions handle forms and lazy enables code splitting. We split Bookstore into URLs, move the search into the query string, and show state leaking to the next book without a key, a lazy chunk downloading before a middleware redirect, and why a static server needs an SPA fallback.
Code Splitting, Tree Shaking and Bundle Analysis: Finding What Bloats Your Bundle
Do not guess what bloats a bundle, measure it: ng build --stats-json, source-map-explorer, rollup-plugin-visualizer and webpack-bundle-analyzer show the breakdown by package, and tree shaking only works on ESM modules without side effects. In Bookstore's Angular app we see that named imports from lodash gain nothing, that a barrel file carries side effects, that removing moment and lodash takes main from 359 kB to 224 kB, and how to make the vendor chunk decision in Vite.