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