CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-source-map-explorer

Analyze and debug space usage through source maps

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration Options

Comprehensive configuration system for customizing analysis behavior, output formats, and visualization options.

Capabilities

Explore Options Interface

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>;

Configuration Categories

Output Control Options

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" }
});

Size Calculation Options

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
});

Path Processing Options

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"
  }
});

Validation Options

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
});

Coverage Integration

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" }
});

Common Configuration Patterns

Development Analysis

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);

CI/CD Integration

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);

Production Optimization

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);

Debug Analysis

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);

Option Interactions

Automatic Option Adjustments

Some options automatically affect others:

  • Setting gzip: true automatically sets onlyMapped: true (unmapped bytes can't be calculated with gzip)
  • CLI equivalents exist for all programmatic options

Conflicting Options

The library handles conflicting options gracefully:

  • gzip: true overrides onlyMapped: false
  • Output format conflicts are resolved by using the last specified format
  • Invalid combinations are logged as warnings but don't prevent analysis

Install with Tessl CLI

npx tessl i tessl/npm-source-map-explorer

docs

analysis-results.md

bundle-analysis.md

configuration.md

error-handling.md

index.md

tile.json