Webpack Bundle Analyzer

webpack-bundle-analyzer is a bundle size analysis tool and Webpack build plugin that visualizes the composition of web application assets. It generates an interactive treemap to identify large dependencies and analyze the distribution of modules within the final payload.

The tool functions as a bundle visualizer and a static report generator, exporting analysis data as standalone HTML and JSON files. It supports live bundle tracking via WebSockets during development and allows for the analysis of existing static stats files through a command line interface.

The project provides capabilities for frontend asset analysis and web performance auditing, including the calculation of compressed sizes and the inspection of concatenated modules. It includes utilities for filtering chunks, searching for specific modules, and mapping dependency trees to optimize build metadata.

Features

Static Stats Analysis - Analyzes existing Webpack stats files via a command line interface to visualize bundle composition.
Build Metadata Inspection - Processes Webpack stats files to analyze bundle composition without needing to trigger a full project rebuild.
Bundle Size Analyzers - Calculates and displays raw and compressed module sizes to help developers optimize the final payload.
Bundle Size Optimization - Visualizes the Webpack output to find large dependencies and reduce the overall size of JavaScript bundles.
Dependency Visualizers - Maps the relationships and sizes of project modules using an interactive treemap for dependency debugging.
Frontend Asset Optimization - Examines the composition of production assets to identify which modules occupy the most space in the browser.
Bundle - Exports bundle analysis data as standalone HTML and JSON files for sharing and programmatic use.
Live Tracking - Updates the module treemap in real-time via WebSockets when used with a development server.
Build Tool Plugins - Integrates into the Webpack build process as a plugin to generate reports on module sizes.
Analysis Result Exporters - Provides utilities for exporting bundle analysis results into static HTML and JSON formats for sharing.
Performance Auditing - Measures compressed file sizes and identifies redundant code to improve page load times and network efficiency.
Bundle Analysis - Visualizes bundle content as an interactive treemap.

Historial de estrellas

webpackwebpack-bundle-analyzer

Name: webpack/webpack-bundle-analyzer
Author: webpack

View on GitHub

12,667 estrellas507 forksJavaScriptMIT3 vistas

Webpack Bundle Analyzer

Features

Static Stats Analysis - Analyzes existing Webpack stats files via a command line interface to visualize bundle composition.
Build Metadata Inspection - Processes Webpack stats files to analyze bundle composition without needing to trigger a full project rebuild.
Bundle Size Analyzers - Calculates and displays raw and compressed module sizes to help developers optimize the final payload.
Bundle Size Optimization - Visualizes the Webpack output to find large dependencies and reduce the overall size of JavaScript bundles.
Dependency Visualizers - Maps the relationships and sizes of project modules using an interactive treemap for dependency debugging.
Frontend Asset Optimization - Examines the composition of production assets to identify which modules occupy the most space in the browser.
Bundle - Exports bundle analysis data as standalone HTML and JSON files for sharing and programmatic use.
Live Tracking - Updates the module treemap in real-time via WebSockets when used with a development server.
Build Tool Plugins - Integrates into the Webpack build process as a plugin to generate reports on module sizes.
Analysis Result Exporters - Provides utilities for exporting bundle analysis results into static HTML and JSON formats for sharing.
Performance Auditing - Measures compressed file sizes and identifies redundant code to improve page load times and network efficiency.
Bundle Analysis - Visualizes bundle content as an interactive treemap.

Alternativas open-source a Webpack Bundle Analyzer

Proyectos open-source similares, clasificados según cuántas características comparten con Webpack Bundle Analyzer.

addyosmani/agent-skills
addyosmani/agent-skills
60,849Ver en GitHub
Agent-skills is a collection of structured instructions and behavioral personas designed to standardize how AI coding agents perform engineering tasks. It functions as a workflow orchestrator that maps natural language intent to repeatable technical sequences and verification checklists. The project distinguishes itself through the use of specialized markdown-defined roles, such as security auditors or test engineers, to apply targeted domain expertise. It employs an evidence-based verification model that requires runtime data or passing tests as mandatory exit criteria to ensure AI-generated
Shellagent-skillsantigravityantigravity-ide
Ver en GitHub60,849
antfu/unplugin-icons
antfu/unplugin-icons
4,876Ver en GitHub
unplugin-icons is a universal icon component provider and build-time asset optimizer that transforms diverse SVG libraries into a unified cross-framework interface. It functions as an SVG icon pipeline, converting thousands of icons from various sets into on-demand components or raw strings for use across different frontend frameworks. The tool provides a cross-framework icon library that optimizes bundle sizes by exclusively including the specific icons referenced in the source code. It further simplifies the development workflow through automatic icon importing and the use of aliases to map
TypeScript
Ver en GitHub4,876
developit/microbundle
developit/microbundle
8,135Ver en GitHub
Microbundle is a zero-configuration JavaScript module bundler designed to package small libraries and modules into optimized distribution files. It serves as a JavaScript library packager and TypeScript compiler, converting source code into compatible module formats for both browser and server-side runtimes. The tool functions as a bundle size optimizer by mangling object properties and analyzing bundle composition to reduce final file sizes. It also acts as a CSS module processor, converting style imports into external stylesheets or scoped modules to prevent global namespace collisions. It
JavaScript
Ver en GitHub8,135

Preguntas frecuentes

¿Qué hace webpack/webpack-bundle-analyzer?

¿Cuáles son las características principales de webpack/webpack-bundle-analyzer?

Las características principales de webpack/webpack-bundle-analyzer son: Static Stats Analysis, Build Metadata Inspection, Bundle Size Analyzers, Bundle Size Optimization, Dependency Visualizers, Frontend Asset Optimization, Bundle, Live Tracking.

¿Qué alternativas de código abierto existen para webpack/webpack-bundle-analyzer?

Las alternativas de código abierto para webpack/webpack-bundle-analyzer incluyen: addyosmani/agent-skills — Agent-skills is a collection of structured instructions and behavioral personas designed to standardize how AI coding… developit/microbundle — Microbundle is a zero-configuration JavaScript module bundler designed to package small libraries and modules into… pastelsky/bundlephobia — Bundlephobia is a suite of tools for analyzing the composition and size of JavaScript dependencies from the npm… antfu/unplugin-icons — unplugin-icons is a universal icon component provider and build-time asset optimizer that transforms diverse SVG… didi/mpx — MPX is a cross-platform framework designed to build applications for multiple mini-program ecosystems and the web from… elm/compiler — This project is a functional programming compiler and JavaScript transpiler that transforms a statically typed…