vite-plugin-inspect

vite-plugin-inspect

Inspect the intermediate state of Vite plugins. Useful for debugging and authoring plugins.

Install

npm i -D vite-plugin-inspect

[!NOTE]

v10.x requires Vite v6.0.1 or above.

For Vite v2 to v5, use v0.8.x of vite-plugin-inspect. If you want to use it with both Vite 6 and below, you can still use v0.8.x, it's forwards compatible.

Add plugin to your vite.config.ts:

// vite.config.ts
import Inspect from 'vite-plugin-inspect'

export default {
  plugins: [
    Inspect()
  ],
}

Then run npm run dev and visit localhost:5173/__inspect/ to inspect the modules.

Build Mode

To inspect transformation in build mode, you can pass the build: true option:

// vite.config.ts
import Inspect from 'vite-plugin-inspect'

export default {
  plugins: [
    Inspect({
      build: true,
      outputDir: '.vite-inspect'
    })
  ],
}

After running vite build, the inspector client will be generated under .vite-inspect, where you can use npx serve .vite-inspect to check the result.

Sponsors

License

MIT License © 2021-PRESENT Anthony Fu

Similar packages

Other packages similar to vite-plugin-inspect

rollup-plugin-visualizer

rollup-plugin-visualizer is a plugin for Rollup that visualizes the size of the output files and their dependencies. It provides a treemap visualization of the bundle, which can help you understand the size and structure of your bundle. Compared to vite-plugin-inspect, rollup-plugin-visualizer focuses more on the size and structure of the final bundle rather than the internal state of the build process.

webpack-bundle-analyzer

webpack-bundle-analyzer is a plugin for Webpack that provides a visual representation of the size and composition of your Webpack bundles. It generates an interactive treemap visualization of the contents of your bundles, helping you identify large modules and optimize your build. While vite-plugin-inspect focuses on the internal state of Vite, webpack-bundle-analyzer is more concerned with the final output of the build process.