Build Tools

What Is Webpack and Bundling?

Webpack is a module bundler that walks a JavaScript application’s dependency graph starting from an entry file and combines all the modules, along with assets…

What Is Tree-Shaking in JavaScript?

Tree-shaking is a build-time optimization where a bundler statically analyzes ES module import/export statements to detect which exports are actually used, the…

What Is the CSS-in-JS Approach and When Should You Use It?

CSS-in-JS is a styling pattern where component styles are written and scoped in JavaScript files alongside the markup, with a runtime or build-time tool genera…

What Does Babel Do When Transpiling JavaScript?

Babel is a JavaScript compiler that parses modern source code into an abstract syntax tree, transforms that tree using plugins/presets to rewrite newer syntax…

ES Modules vs. Bundlers: How Do They Relate?

ES modules are the native, browser- and Node-supported import/export syntax for organizing code into files with explicit dependencies, while a bundler is a sep…

What Are Source Maps and Why Do They Matter?

A source map is a separate file that maps each position in minified, transpiled, or bundled production JavaScript back to its original location in the source c…

How Do Modern Module Bundlers Like Vite, esbuild, and Webpack Compare?

Webpack bundles everything up front through a JavaScript-based dependency graph, esbuild is a Go-based bundler/minifier built for raw speed, and Vite uses nati…

How Do CSS Custom Media Queries (@custom-media) Work?

CSS custom media queries let you define a named, reusable media condition once with @custom-media --name (condition), and then reference it by name across your…

Monorepo vs Polyrepo for Frontend Projects: How Do You Choose?

A monorepo stores multiple frontend packages (apps, shared UI libraries, config) in one version-controlled repository with a single dependency graph and unifie…

What Is Webpack Module Federation and How Does It Work?

Module Federation is a Webpack (and now Rspack/Vite-ecosystem) capability that lets separately built and independently deployed JavaScript bundles dynamically…

How Do You Use Bundle Analysis Tools to Optimize JavaScript?

Bundle analysis tools like webpack-bundle-analyzer or source-map-explorer parse a build’s stats output and source maps to render a visual treemap showing exact…

What Is Dead Code Elimination and How Does It Work?

Dead code elimination is a build-time optimization where the bundler statically analyzes which exported code paths are never imported or used and removes them…

What Is Utility-First CSS and How Does It Differ From Semantic CSS?

Utility-first CSS is a workflow where a framework like Tailwind provides a large, pre-defined library of small utility classes (spacing, color, layout, typogra…

What Are CSS Modules and How Do They Solve Global Scope Problems?

CSS Modules are CSS files processed by a build tool so that every class name is automatically scoped to the specific component that imports it, generating uniq…

What Is a Web Performance Budget?

A performance budget is a set of measurable limits — such as maximum bundle size, request count, or a target Time to Interactive — that a team agrees not to ex…