Installation | Configuration | Credits

Vite plugin for generating source map visualizations of transform results

vite-plugin-source-map-visualizer is a Vite plugin for inspecting source maps of the transformed files. It generates HTML report that provides quick way for seeing how the tranformed files look in source-map-visualization. See live example.

For more detailed plugin debugging tool you might want to check vite-plugin-inspect instead.

$ npm install --save-dev vite-plugin-source-map-visualizer

import { defineConfig } from "vite";
import { sourcemapVisualizer } from "vite-plugin-source-map-visualizer";
export default defineConfig({
 plugins: [sourcemapVisualizer()],
});

Run Vite and check .vite-source-map-visualizer/report.html:

└── .vite-source-map-visualizer
 └── report.html

You can pass options to the plugin as function arguments:

export default defineConfig({
 plugins: [
 sourcemapVisualizer({
 filename: "my-report.html",
 }),
 ],
});

Filename for the report. Defaults to report.html.

Directory for the output. Defaults to .vite-source-map-visualizer.

Silence plugin's verbose logging.

Format name of the files:

export default defineConfig({
 plugins: [
 sourcemapVisualizer({
 formatName: (filename) => filename.replace("src/", "/"),
 }),
 ],
});

Special thanks to:

• vite-plugin-inspect from @antfu
• source-map-visualization from @evanw