vite-bundle-visualizer

What is vite-bundle-visualizer?

The vite-bundle-visualizer npm package is a tool designed to help developers analyze and visualize the contents of their Vite project bundles. It provides insights into the size and composition of the bundle, helping to identify potential areas for optimization.

What are vite-bundle-visualizer's main functionalities?

Bundle Analysis

This feature allows you to generate a visual representation of your bundle. The code sample demonstrates how to configure the visualizer plugin in a Vite project to output the analysis to a file named 'stats.html' and automatically open it in the browser.

import { defineConfig } from 'vite';
import { visualizer } from 'vite-bundle-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      filename: './stats.html',
      open: true
    })
  ]
});

Custom Report Filename

This feature allows you to specify a custom filename for the generated report. The code sample shows how to set the filename to 'custom-report.html'.

import { defineConfig } from 'vite';
import { visualizer } from 'vite-bundle-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      filename: './custom-report.html'
    })
  ]
});

JSON Report

This feature enables the generation of a JSON report instead of an HTML file. The code sample demonstrates how to configure the visualizer to output the analysis in JSON format to 'stats.json'.

import { defineConfig } from 'vite';
import { visualizer } from 'vite-bundle-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      json: true,
      filename: './stats.json'
    })
  ]
});

Other packages similar to vite-bundle-visualizer

webpack-bundle-analyzer

webpack-bundle-analyzer is a popular tool for visualizing the size of webpack output files. It provides a treemap visualization of the contents of your bundle, helping to identify large modules and optimize the build. Compared to vite-bundle-visualizer, it is specifically designed for webpack projects.

rollup-plugin-visualizer

rollup-plugin-visualizer is a plugin for Rollup that generates a visual representation of the bundle. It offers similar functionality to vite-bundle-visualizer but is tailored for Rollup projects. It helps in understanding the composition of the bundle and identifying optimization opportunities.

source-map-explorer

source-map-explorer analyzes JavaScript bundles using source maps to determine which file each byte in the minified output came from. It provides a detailed breakdown of the bundle size, helping to identify large dependencies and optimize the build. It is a more general tool that can be used with various bundlers, including Vite.

README

vite-bundle-visualizer

Visualize vite bundle, like webpack-bundle-analyzer.

Use rollup-plugin-visualizer.

Usage

# In your vite project's root
$ npx vite-bundle-visualizer
# Then open stats.html in browser

# Use specified vite config file
$ npx vite-bundle-visualizer -c your.config.js

$ vite-bundle-visualizer --help

vite-bundle-visualizer

Usage:
  $ vite-bundle-visualizer <command> [options]

Options:
  -h, --help                Display this message
  --template -t <template>  Template to use, options are "raw-data" (JSON), "treemap", "list", "sunburst" and "network" (default: treemap)
  --output -o <filepath>    Output file path, should be "**/*.html" or "**/*.json" (default: /var/folders/lb/9tn84c8x42nctvbs1fb3vxd40000gn/T/tmp-20782-nmqZuvXaZNxh/stats.html)
  --open <open>             Should open browser after generated, except when template is "json" (default: true)
  --config -c <file>        Use specified vite config file
  --entry --input -i        Use specified entry file, default is "index.html"
  --sourcemap               use sourcemap to calculate sizes of modules. By idea it will present more accurate results, defaults is false
  --sourcemap               use sourcemap to calculate sizes of modules. By idea it will present more accurate results, defaults is false
  --mode -m <mode>          set env mode, defaults to production

Screenshots

Visualizer Templates

Treemap

$ vite-bundle-visualizer

Sunburst

$ vite-bundle-visualizer -t sunburst

Network

$ vite-bundle-visualizer -t network

Raw data

Output raw data (JSON) of stats

# @deprecated vite-bunlde-visualizer -t json
$ vite-bundle-visualizer -t raw-data

demo/stats.json

List

Output yml file with all the data

$ vite-bundle-visualizer -t list

demo/stats.yml

Dependencies

• rollup-plugin-visualizer

License

MIT