Output bundle stats in Vite

rollup-plugin-webpack-stats extracts the Vite stats, transforms them into a webpack stats like 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 webpackStatsPlugin from 'rollup-plugin-webpack-stats';
export default defineConfig((env) => ({
build: {
rollupOptions: {
output: {
// Use a supported file pattern for Vite 5/Rollup 4
// @doc https://relative-ci.com/documentation/guides/vite-config
assetFileNames: 'assets/[name].[hash][extname]',
chunkFileNames: 'assets/[name].[hash].js',
entryFileNames: 'assets/[name].[hash].js',
},
},
},
plugins: [
// Output webpack-stats.json file
webpackStatsPlugin(),
],
}));

Plugin options

  • moduleOriginalSize - use module original size (default: false - use module rendered size)
  • excludeAssets - exclude matching assets: string | RegExp | ((filepath: string) => boolean) | Array<string | RegExp | ((filepath: string) => boolean)>
  • excludeModules - exclude matching modules: string | RegExp | ((filepath: string) => boolean) | Array<string | RegExp | ((filepath: string) => boolean)>

Output Vite stats JSON file

The plugin generates the Vite 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!