Analyze your Webpack bundle size instantly with this free browser-based JSON treemap visualizer. Upload your stats.json file to optimize frontend performance.
AI Generation Prompt
Webpack Bundle Analyzer JSON Treemap Visualizer
Overview
A high-performance, browser-only tool designed to visualize Webpack stats.json files. It transforms complex dependency trees into interactive, color-coded D3.js treemaps, allowing developers to identify size bottlenecks instantly. Built for security and speed, it processes files client-side without any server connectivity.
Core Features
- Client-Side Processing: Zero-server architecture. All JSON parsing and D3.js rendering occur within the browser.
- Interactive Treemap: Uses D3.js to render a hierarchical view of your bundle. Click nodes to zoom in; double-click or use the breadcrumb navigation to zoom out.
- Search & Filter: Real-time filtering by module name, path, or file extension.
- Size Metrics: Displays both raw file size and parsed size if provided in the stats.
- Responsive UI: Seamless experience on desktops for detailed analysis, and a simplified mobile view for quick statistics review.
- No-Persistence Design: No usage of localStorage, cookies, or IndexedDB. Privacy-focused architecture ensures data is ephemeral.
Technical Specification
- Single-File Architecture: All HTML, Tailwind CSS (via CDN), and D3.js logic (via CDN) contained within one file.
- Rendering Engine: D3.js (Hierarchy, Treemap, Zoom plugins).
- Upload Mechanism: FileReader API for secure, local-only JSON ingestion. Validation logic to ensure valid stats.json structure before processing.
- Layout Structure:
- Header: Title, simple file-input button, and help trigger.
- Control Toolbar: Breadcrumbs, search input, sort-by-size toggle, and a legend for file types.
- Main Workspace: Large, responsive container for the D3 treemap visualization.
- Info Panel: A non-intrusive side or bottom drawer displaying stats for the currently selected module (name, size, path).
Design System & Aesthetics
- Aesthetic: Clean, SaaS-inspired look. High-contrast white background, soft grayscale borders, and professional, vibrant colors for the treemap nodes (using a modern, accessible color palette).
- Typography: Sans-serif, human-readable fonts (e.g., Inter or system UI stacks).
- Animations: Smooth D3 transitions for zooming and filtering. Micro-interactions for hovering over nodes to reveal metadata.
- No Dark Mode: Forced light-mode aesthetic to ensure professional, readable data visualization.
Developer Directives
- Sandbox Compatibility: Do NOT use
localStorage,sessionStorage, orcookies. Use in-memory variables to store the parsed JSON state. - Security: Use
target="_blank" rel="noopener noreferrer"for all external links. - No Prompts: Do not use
alert(),confirm(), orprompt(). Create custom CSS/HTML modal overlays for error messages (e.g., invalid JSON format) or help screens. - Performance: Debounce the search input to prevent D3 re-renders while the user is typing.
- Responsive: Ensure the SVG container maintains its aspect ratio and scales effectively during window resize events.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I generate the stats.json file for this visualizer?
To generate the required file, you must run the Webpack Bundle Analyzer CLI tool with the flag to output the statistics file. Add the command '--json stats.json' to your build script or use the Webpack plugin configuration to export the compilation data after a successful build process. Once the build completes, a file named 'stats.json' will be created in your output directory. You can then drag and drop this file directly into our application interface to visualize your bundle structure immediately without any server-side processing.
Is my bundle data secure when using this tool?
Yes, your data is completely secure. This tool operates entirely on your local machine within your browser, and no data is ever uploaded to a server or stored in a database. Everything happens locally in your computer's memory to ensure total privacy for your proprietary source code. Since this application does not use cookies, local storage, or server-side databases, your 'stats.json' data is wiped as soon as you refresh the page or close the tab. You can safely analyze sensitive project files without any risk of intellectual property leakage.
Can I filter the treemap by module or file type?
Yes, the visualizer includes a powerful search and filtering engine that allows you to narrow down your focus. You can type specific module names, file extensions (like .js, .css, or .png), or folder paths into the search bar to highlight relevant nodes within the treemap visualization. When a filter is applied, the treemap dynamically recalculates to display only the matching modules. This feature is particularly useful for identifying heavy dependencies or finding specific files that contribute most significantly to your overall bundle size.
Why is my Webpack bundle size so large?
A large bundle size is often caused by including excessive third-party dependencies, importing unnecessary code, or failing to implement tree-shaking correctly. By visualizing your dependencies in a treemap, you can quickly identify which libraries take up the most space and determine if they can be replaced, code-split, or lazily loaded. This visualizer helps you spot 'bloated' packages that might be importing their entire library when you only need a single function. By making these hidden size contributors visible, you can make data-driven decisions to optimize your build configuration and significantly improve your website's load time.
