How to use source-map-explorer with Webpack?

After building with Webpack and enabling source maps in your configuration, run source-map-explorer on the output bundle files. Ensure source maps are generated correctly, often by setting devtool options, to avoid analysis errors.

source-map-explorer vs webpack-bundle-analyzer, which should I use?

Source Map Explorer provides precise, source-level insights using source maps for detailed file breakdowns, while webpack-bundle-analyzer offers a higher-level view of Webpack-specific chunks and dependencies. Choose based on whether you need granular source tracing or chunk visualization.

How to fix unmapped bytes warnings in source-map-explorer?

Unmapped bytes indicate code not traced to source files, often from bundler-generated code. Use the --only-mapped flag to exclude them, or ensure your build process includes all source maps, as mentioned in the generating source maps section.

Can source-map-explorer analyze TypeScript bundles?

Yes, but only if source maps are generated from TypeScript compilation. The tool works with any JavaScript bundle that has source maps, so ensure your TypeScript compiler outputs them correctly for accurate analysis.

How to save and share source-map-explorer reports?

Use the --html flag with a filename, like --html report.html, to save interactive visualizations as standalone files. This allows easy sharing or archival, as shown in the CLI examples.

What does the gzip option really calculate?

It estimates the gzipped size of the bundle and components, but due to compression nature, removing a file may not reduce size proportionally. The README notes this inaccuracy and that unmapped bytes can't be calculated in gzip mode.

Open-Awesome

source-map-explorer

Apache-2.0TypeScriptv2.5.3

Analyze and debug JavaScript code bloat through source maps with a treemap visualization.

GitHub

3.9k stars112 forks0 contributors

What is source-map-explorer?

Source Map Explorer is a Node.js tool that analyzes minified JavaScript bundles by using source maps to trace each byte back to its original source file. It helps developers understand what is contributing to their bundle size, identify duplicate dependencies, and find opportunities for optimization. The tool provides a visual treemap and multiple data export formats to make this analysis accessible.

Target Audience

Frontend and JavaScript developers working on web applications who need to optimize bundle sizes, especially those using bundlers like Webpack or Browserify. It's also useful for performance engineers focused on reducing initial load times.

Value Proposition

Developers choose Source Map Explorer because it provides an intuitive, visual way to analyze bundle composition directly from source maps, without requiring complex setup. Its ability to integrate with code coverage data and calculate gzip sizes offers deeper insights than basic bundle analyzers.

Overview

Analyze and debug space usage through source maps

Use Cases

Best For

Identifying which libraries or modules are taking up the most space in a production bundle
Debugging duplicate dependencies (like two copies of React) in a bundle
Visualizing code coverage to find unused code that can be split or removed
Analyzing the impact of code changes on bundle size during development
Generating reports on bundle composition for performance audits
Integrating bundle analysis into CI/CD pipelines via its JSON or TSV outputs

Not Ideal For

Projects that do not generate source maps in their build process
Teams needing real-time, integrated bundle analysis within development servers like Webpack Dev Server
Applications with server-side rendering and minimal client-side JavaScript where bundle size analysis is irrelevant
Developers looking for automated code-splitting suggestions without manual interpretation of visual data

Pros & Cons

Pros

Interactive Treemap Visualization

Provides an intuitive visual breakdown of bundle composition, making it easy to spot large files or duplicates, as demonstrated in the screenshot and linked demos.

Multiple Output Formats

Supports HTML, JSON, and TSV outputs for flexible integration into workflows or automated reporting, detailed in the options section for CLI and API usage.

Code Coverage Integration

Color-codes the treemap based on Chrome coverage data to identify unused code, helping optimize initial load times with actionable insights.

Gzip Size Estimation

Calculates gzipped sizes for more realistic bundle analysis, addressing compression impacts as described in the gzip option documentation.

Cons

Dependency on Source Maps

Relies on correctly generated source maps; errors like 'Unable to find a source map' are common and can halt analysis, requiring manual setup fixes.

No Built-in Development Integration

Primarily a post-build CLI tool without seamless integration into live development environments, unlike some Webpack plugins that offer real-time feedback.

Complex Error Handling

Error messages for issues like invalid mappings can be cryptic, and options like --no-border-checks are needed to bypass them, adding complexity.

Frequently Asked Questions

Related Projects

Webpack bundle analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

Stars12,664

Forks508

Last commit11 days ago

Bundle Size

Keep your bundle size in check

Stars4,473

Forks176

Last commit1 year ago

Compression webpack plugin

Prepare compressed versions of assets to serve them with Content-Encoding

Stars1,426

Forks109

Last commit2 months ago

BundleStats

Analyze bundle stats(bundle size, assets, modules, packages) and compare the results between different builds. Support for webpack, rspack, vite, rolldown and rollup.

Stars671

Forks23

Last commit18 hours ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub