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 kBdist/webpack-stats.json 55.13 kBdist/assets/utils-daa1a1f7.css 0.03 kB │ gzip: 0.05 kBdist/assets/about-86a446cc.js 79.09 kB │ gzip: 27.53 kBdist/assets/index-bcbba0ad.js 419.66 kB │ gzip: 137.03 kB