Replacements for source-map-explorer
rollup-plugin-visualizer
rollup-plugin-visualizer allows you to visualize rollup, rolldown, and vite bundles
Rollup (rollup.config.js)
js
import { visualizer } from 'rollup-plugin-visualizer'
export default {
plugins: [
// Keep it last.
visualizer()
]
}Rolldown (rolldown.config.ts)
js
import { defineConfig, type RolldownPlugin } from 'rolldown'
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [visualizer() as RolldownPlugin]
})Vite (vite.config.js)
js
import { visualizer } from 'rollup-plugin-visualizer'
export default {
plugins: [visualizer()]
}Vite + TypeScript (vite.config.ts)
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:
js
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:
js
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
module.exports = {
plugins: [new BundleAnalyzerPlugin()]
}