source-map-explorer.md

description	Modern alternatives to the source-map-explorer package for exploring bundle sourcemaps

Replacements for source-map-explorer

rollup-plugin-visualizer

rollup-plugin-visualizer allows you to visualize rollup, rolldown, and vite bundles

Rollup (rollup.config.js)

import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [
    // Keep it last.
    visualizer()
  ]
}

Rolldown (rolldown.config.ts)

import { defineConfig, type RolldownPlugin } from 'rolldown'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [visualizer() as RolldownPlugin]
})

Vite (vite.config.js)

import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [visualizer()]
}

Vite + TypeScript (vite.config.ts)

import { defineConfig, type PluginOption } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [visualizer() as PluginOption]
})

sonda

sonda allows you to visualize vite, rollup, rolldown, esbuild, webpack, and rspack bundles

Example:

import { defineConfig } from 'vite'
import Sonda from 'sonda/vite'

export default defineConfig({
  build: {
    sourcemap: true
  },
  plugins: [Sonda()]
})

For full docs check their website.

webpack-bundle-analyzer

webpack-bundle-analyzer allows you to visualize webpack bundles

Example:

import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'

module.exports = {
  plugins: [new BundleAnalyzerPlugin()]
}