vite-plugin-inspect

What is vite-plugin-inspect?

vite-plugin-inspect is a Vite plugin that provides an inspection tool for Vite projects. It allows developers to inspect the internal state of Vite, including module graph, plugin hooks, and more. This can be particularly useful for debugging and understanding how Vite processes your project.

What are vite-plugin-inspect's main functionalities?

Inspect Module Graph

This feature allows you to inspect the module graph of your Vite project. By including the Inspect plugin in your Vite configuration, you can visualize and understand the relationships between different modules in your project.

import Inspect from 'vite-plugin-inspect';

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

Inspect Plugin Hooks

This feature enables you to inspect the plugin hooks that are being called during the build process. By setting the `hooks` option to true, you can see detailed information about each plugin hook and its execution.

import Inspect from 'vite-plugin-inspect';

export default {
  plugins: [
    Inspect({
      hooks: true
    })
  ]
};

Inspect Transformations

This feature allows you to inspect the transformations applied to your code. By enabling the `transformations` option, you can see how your code is being transformed by different plugins and loaders.

import Inspect from 'vite-plugin-inspect';

export default {
  plugins: [
    Inspect({
      transformations: true
    })
  ]
};

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.

README

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