Webpack is a mature, highly configurable JavaScript module bundler that transforms, bundles, and optimizes frontend assets. Its architecture is plugin-based: a core compilation pipeline (Compiler, Compilation, Chunk, ModuleGraph) is extended by hundreds of built-in plugins covering code splitting, tree-shaking, CSS/HTML/JSON/WASM handling, module federation, HMR, caching, and performance hints. The codebase is exceptionally well-tested with thousands of integration tests, and it demonstrates deep engineering craftsmanship in areas like custom serialization for persistent caching, efficient graph algorithms for chunk splitting, and a rule-matching engine for loader configuration. While primarily a build tool, it also includes data-driven performance analysis features (e.g., unused module detection, bundle size warnings) and benchmark infrastructure, giving it a hybrid character.
Rollup is a production-grade JavaScript module bundler that compiles small code fragments into optimized single-file or multi-chunk outputs. It is used extensively in the JavaScript ecosystem (e.g., by Vite, React, and many libraries) to produce distributable packages in formats such as ES modules, CommonJS, AMD, UMD, IIFE, and SystemJS. The core functionality includes static analysis for tree-shaking, dependency resolution, chunking with manual and dynamic splits, source map generation, and a comprehensive plugin system for customization. The architecture is centered around a graph-based module resolution pipeline. Input files are parsed into an AST (using a Rust-based parser via NAPI or WASM for performance), then analyzed for imports, exports, and side effects. The tree-shaking engine traces variable usage and eliminates dead code. Modules are grouped into chunks based on entry points, manual chunk definitions, and dynamic imports, then rendered by format-specific finalisers. The plugin system provides hooks at every stage (resolution, loading, transformation, output generation) and supports both sequential and parallel execution. Key entry points include the CLI (`cli/cli.ts`), the programmatic API (`src/node-entry.ts`), and the core `rollup` function (`src/rollup/rollup.ts`). The data flow begins with configuration loading (from CLI flags or config files), followed by module resolution, AST parsing, tree-shaking analysis, chunk assignment, and final output generation. The watch mode (`src/watch/watch.ts`) re-triggers the pipeline on file changes. External dependencies include various `@rollup/plugin-*` packages for common tasks (e.g., resolving node modules, transforming TypeScript), `source-map` for source map handling, `fsevents` for file watching on macOS, and the Rust `swc_ecma_ast` crate for fast parsing. The project maintains native binaries for 25+ platforms and a WASM variant for browser environments.
Heroicons is a MIT-licensed SVG icon library providing 16x16, 20x20, and 24x24 pixel icons in outline and solid styles. The system consists of source SVG files that are optimized via SVGO and converted to framework-specific React and Vue components through a sophisticated build process. The library emphasizes tree-shakability, proper theming via currentColor, and accessibility attributes. It's distributed as separate npm packages (@heroicons/react, @heroicons/vue) with a base package containing raw SVGs.