Analyze and debug space usage through source maps
—
Comprehensive configuration system for customizing analysis behavior, output formats, and visualization options.
Complete configuration interface for the explore function.
interface ExploreOptions {
/** Exclude "unmapped" bytes from the output */
onlyMapped?: boolean;
/** Exclude source map comment size from output */
excludeSourceMapComment?: boolean;
/** Output result as a string */
output?: {
format: OutputFormat;
/** Filename to save output to */
filename?: string;
};
/** Disable removing prefix shared by all sources */
noRoot?: boolean;
/** Disable invalid mapping column/line checks */
noBorderChecks?: boolean;
/** Replace "this" by "that" map */
replaceMap?: ReplaceMap;
/** Path to Chrome code coverage JSON export */
coverage?: string;
/** Calculate gzip size. Setting it to true will also set onlyMapped to true */
gzip?: boolean;
/** Sort filenames */
sort?: boolean;
}
type OutputFormat = 'json' | 'tsv' | 'html';
type ReplaceMap = Record<string, string>;Options controlling how results are formatted and where they're saved.
interface OutputOptions {
format: OutputFormat;
filename?: string;
}Usage Examples:
import { explore } from "source-map-explorer";
// JSON output to console
const result = await explore("bundle.js", {
output: { format: "json" }
});
// Save HTML visualization to file
const result = await explore("bundle.js", {
output: { format: "html", filename: "analysis.html" }
});
// TSV output for spreadsheet import
const result = await explore("bundle.js", {
output: { format: "tsv", filename: "sizes.tsv" }
});Control which bytes are included in size calculations.
// Include/exclude unmapped bytes
onlyMapped?: boolean;
// Include/exclude source map comment bytes
excludeSourceMapComment?: boolean;
// Calculate gzip compressed sizes
gzip?: boolean;Usage Examples:
// Exclude unmapped bytes for cleaner results
const result = await explore("bundle.js", {
onlyMapped: true
});
// Exclude source map comment from totals
const result = await explore("bundle.js", {
excludeSourceMapComment: true
});
// Calculate gzip sizes (automatically sets onlyMapped: true)
const result = await explore("bundle.js", {
gzip: true
});
// Combined size options
const result = await explore("bundle.js", {
onlyMapped: true,
excludeSourceMapComment: true,
gzip: false
});Control how file paths are processed and displayed in results.
// Disable common path prefix removal
noRoot?: boolean;
// File path string replacement
replaceMap?: Record<string, string>;
// Sort filenames alphabetically
sort?: boolean;Usage Examples:
// Keep full paths (don't remove common prefix)
const result = await explore("bundle.js", {
noRoot: true
});
// Replace path segments for cleaner display
const result = await explore("bundle.js", {
replaceMap: {
"node_modules": "deps",
"src/components": "components"
}
});
// Sort filenames for consistent output
const result = await explore("bundle.js", {
sort: true
});
// Combined path processing
const result = await explore("bundle.js", {
noRoot: false,
sort: true,
replaceMap: {
"/very/long/project/path": "",
"node_modules": "deps"
}
});Control source map validation and error checking behavior.
// Disable invalid mapping column/line checks
noBorderChecks?: boolean;Usage Examples:
// Disable strict mapping validation (for problematic source maps)
const result = await explore("bundle.js", {
noBorderChecks: true
});
// Enable all validation (default behavior)
const result = await explore("bundle.js", {
noBorderChecks: false
});Support for Chrome DevTools code coverage data to create heat map visualizations.
// Path to Chrome code coverage JSON export
coverage?: string;Usage Examples:
// Add code coverage heat map
const result = await explore("bundle.js", {
coverage: "coverage-data.json",
output: { format: "html" }
});
// Coverage with other options
const result = await explore("bundle.js", {
coverage: "./chrome-coverage.json",
gzip: true,
output: { format: "html", filename: "coverage-analysis.html" }
});Typical settings for development-time bundle analysis:
const devConfig: ExploreOptions = {
output: { format: "html" },
sort: true,
replaceMap: {
"node_modules": "deps",
"src/": ""
}
};
const result = await explore("dist/*.js", devConfig);Configuration for automated testing and reporting:
const ciConfig: ExploreOptions = {
output: { format: "json", filename: "bundle-analysis.json" },
onlyMapped: true,
sort: true,
gzip: true
};
const result = await explore("dist/bundle.js", ciConfig);Settings for detailed production bundle analysis:
const prodConfig: ExploreOptions = {
output: { format: "html", filename: "production-analysis.html" },
gzip: true,
sort: true,
coverage: "production-coverage.json",
replaceMap: {
"/app/build/": "",
"node_modules": "dependencies"
}
};
const result = await explore("build/static/js/*.js", prodConfig);Configuration for troubleshooting source map issues:
const debugConfig: ExploreOptions = {
output: { format: "json" },
noBorderChecks: true,
noRoot: true,
onlyMapped: false,
excludeSourceMapComment: false
};
const result = await explore("problematic-bundle.js", debugConfig);Some options automatically affect others:
gzip: true automatically sets onlyMapped: true (unmapped bytes can't be calculated with gzip)The library handles conflicting options gracefully:
gzip: true overrides onlyMapped: falseInstall with Tessl CLI
npx tessl i tessl/npm-source-map-explorer