Best of Webpack — 2025

1. 1
   Article

   freeCodeCamp·50w

   The Micro-Frontend Architecture Handbook

   A comprehensive guide covering four main approaches to micro frontend architecture: iframes with cross-window messaging, Web Components with Shadow DOM, single-spa for orchestrating multiple SPAs, and Module Federation for runtime code sharing. Each method is explained with practical code examples, pros/cons analysis, and real-world use cases. The guide also covers additional tools like Piral, Luigi, and Import Maps, helping developers choose the right approach based on team structure, technical requirements, and deployment needs.

   434

   9
2. 2
   Article

   freeCodeCamp·51w

   How Microfrontends Work: From iframes to Module Federation

   Microfrontends enable teams to build and deploy frontend applications independently at scale, moving from monolithic UIs to decoupled codebases. Traditional approaches include server-side composition, iframes, and build-time integration through packages. Module Federation represents the modern solution, allowing runtime integration of remote UI components while sharing dependencies for optimal performance. The article compares different microfrontend patterns, highlighting Module Federation's advantages in independent deployments and performance, while acknowledging setup complexity and operational challenges like cross-domain issues and styling conflicts.

   156

   1
3. 3
   Article

   The New Stack·34w

   How Vite Became the Backbone of Modern Frontend Frameworks

   Vite has rapidly become the dominant build tool for modern frontend frameworks within just five years. Created by Evan You, Vite leverages ES Modules to provide faster development experiences compared to Webpack. Starting as Vue Dev Server in 2019, it evolved into a framework-agnostic tool with Vite 2.0 in 2021, gaining adoption across Vue, React, Svelte, Astro, and other frameworks. You's company VoidZero is now developing Vite+, a unified toolchain that combines multiple Rust-based tools with AI integration features.

   95

   4
4. 4
   Article

   LogRocket·1y

   How to master JavaScript debugging for web apps

   Mastering JavaScript debugging is essential for maintaining complex web applications. This guide covers using source maps to debug minified code and leveraging Chrome DevTools for efficient error identification and resolution. It includes practical examples and configuration tips for using webpack to generate source maps, as well as advanced debugging techniques such as breakpoints, step-through, call stacks, and watch expressions.

   91

   1
5. 5
   Article

   Netguru·42w

   React Performance Optimization: Techniques Senior Developers Use

   Advanced React performance optimization techniques including component memoization with PureComponent and React.memo, Redux selector optimization with Reselect, avoiding prop mutations, using useDeferredValue for responsive UIs, profiling with React DevTools and Chrome Performance tab, production optimizations like tree shaking and lazy loading, and strategic code splitting patterns.

   89
6. 6
   Video

   Awesome·43w

   Microfrontends the right way

   Microfrontends promise independent deployments and team autonomy but often introduce unnecessary complexity. While the concept addresses organizational challenges more than technical ones, several implementation approaches exist: iframes provide hard isolation but poor UX, web components offer framework-agnostic custom elements with shadow DOM, single-spa adds orchestration layers that create distributed system complexity, and Webpack's module federation enables runtime code sharing. Modern browsers support native ES modules for cross-domain imports, potentially reducing bundler dependency. Astro's island architecture emerges as a practical solution, loading UI components only when needed.

   66

   3
7. 7
   Article

   LogRocket·38w

   The silent shift to Vite: What it means for your stack

   Vite has surpassed Webpack in weekly downloads, reaching 140 million, marking a significant shift in JavaScript build tools. The transition reflects developers' preference for faster build times, instant hot reloads, and simpler configuration. While Webpack dominated for years with its comprehensive bundling capabilities, Vite leverages native ES modules for instant server startup and near-instant hot module replacement. For new projects, Vite is recommended as the default choice, while existing Webpack projects should only migrate if experiencing performance issues or configuration complexity.

   34

   6
8. 8
   Video

   Awesome·32w

   Vite just got too big to ignore…

   Vite has surpassed 150 million weekly downloads and become the dominant build tool for modern front-end development. Unlike Webpack's slow bundling approach, Vite leverages native ES modules to serve source files directly during development, resulting in instant server startup and near-instant hot module replacement. Its lean core philosophy delegates features to plugins while using fast native tools like esbuild and SWC for performance. The tool supports code splitting, dynamic imports, and server-side rendering out of the box, with production builds optimized through Rollup for minimal bundle sizes and efficient caching.

   32

   5
9. 9
   Article

   LogRocket·43w

   Next.js 15.4 is here: What’s new and what to expect

   Next.js 15.4 marks a significant milestone with Turbopack passing all 8,302 integration tests for production builds, making it production-ready. The release includes practical improvements like onInvalidate callback for router.prefetch(), global-not-found pages, debug-prerender flag, and various bug fixes. Performance optimizations include improved static path generation and React Compiler integration. The update sets the stage for Next.js 16, which will promote Turbopack to beta status and introduce unified caching with cacheComponents. Upgrading is straightforward using the automated CLI tool or manual dependency updates.

   20

   1