RelativeCI

In-depth bundle analysis and monitoring

Vite: Output bundle stats Beta

rollup-plugin-webpack-stats extracts the rollup bundle stats, transforms them to a webpack stats structure, and generates the JSON file.

Install

npm install --save-dev rollup-plugin-webpack-stats
yarn add --dev rollup-plugin-webpack-stats
pnpm add -D rollup-plugin-webpack-stats

Configure

vite.config.js
import { defineConfig } from 'vite';
import { webpackStats } from 'rollup-plugin-webpack-stats';


export default defineConfig((env) => ({
  build: {
    rollupOptions: {
      output: {
        // Use a supported file pattern for Vite 5/Rollup 4
        assetFileNames: 'assets/[name].[hash][extname]',
        chunkFileNames: 'assets/[name].[hash].js',
        entryFileNames: 'assets/[name].[hash].js',
      },
    },
  },
  plugins: [
    // Output webpack-stats.json file
    webpackStats(),
  ],
}));

Output bundle stats JSON file

The plugin generates the bundle stats JSON file during the build process:

npx vite build
✓ 1908 modules transformed.
dist/index.html                          0.30 kB
dist/webpack-stats.json                 55.13 kB
dist/assets/utils-daa1a1f7.css           0.03 kB │ gzip:   0.05 kB
dist/assets/about-86a446cc.js           79.09 kB │ gzip:  27.53 kB
dist/assets/index-bcbba0ad.js          419.66 kB │ gzip: 137.03 kB



Need help?Contact us via email, Twitter, or GitHub!

Start analyzing and monitoring yourbundle stats

Get started