vite-plugin-source-map-visualizer

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.

vite-plugin-source-map-visualizer.webm

Installation

$ 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

Configuration

You can pass options to the plugin as function arguments:

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

filename

Filename for the report. Defaults to report.html.

outDir

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

silent

Silence plugin's verbose logging.

formatName

Format name of the files:

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

Credits

Special thanks to:

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