vite-plugin-total-bundle-size

1.0.8 verified Mon Apr 27 auth: no javascript

Vite plugin that outputs the total size of the bundle after build. Current stable version 1.0.8, released infrequently. It provides a simple way to display bundle size in the console, with options to filter files by regex, print per-file stats, and calculate gzip sizes. Unlike rollup-plugin-visualizer or webpack-bundle-analyzer, it focuses on minimal output and is easy to integrate into CI. Ships TypeScript types. Requires Vite >=5.0.0.

Common errors

error Error: Cannot find module 'vite-plugin-total-bundle-size' ↓

cause Package not installed or missing in node_modules.

fix

npm i -D vite-plugin-total-bundle-size

error TypeError: totalBundleSize is not a function ↓

cause Attempted to use totalBundleSize as a plugin without calling it, e.g., plugins: [totalBundleSize].

fix

Use plugins: [totalBundleSize()]

error Error: The plugin doesn't support the current version of Vite. ↓

cause Vite version <5.0.0, which is not supported.

fix

Upgrade Vite to >=5.0.0

Warnings

gotcha Plugin must be placed in the plugins array; providing the function reference instead of calling it will cause an error. ↓

fix Ensure you call totalBundleSize() in the plugins array, not just pass totalBundleSize.

gotcha When using CommonJS (require), you cannot use destructuring for named exports in most setups; use the default import pattern or use dynamic import. ↓

fix Use import syntax or const { totalBundleSize } = require('vite-plugin-total-bundle-size') if the package supports it (it's ESM-first).

breaking Requires Vite >=5.0.0. Older Vite versions (especially 4.x) will not work. ↓

fix Upgrade Vite to version 5 or above.

Install

npm install vite-plugin-total-bundle-size

yarn add vite-plugin-total-bundle-size

pnpm add vite-plugin-total-bundle-size

Imports

totalBundleSize

wrong

import totalBundleSize from 'vite-plugin-total-bundle-size'

correct

import { totalBundleSize } from 'vite-plugin-total-bundle-size'

Named export, not default.

TotalBundleSizeOptions

wrong

const { TotalBundleSizeOptions } = require('vite-plugin-total-bundle-size')

correct

import { TotalBundleSizeOptions } from 'vite-plugin-total-bundle-size'

Named export for type options. TypeScript only.

totalBundleSize() in config
wrong
```
plugins: [totalBundleSize]
```
correct
```
plugins: [totalBundleSize()]
```
Must call the function to return a plugin instance.

Quickstart

Configures the Vite plugin with options: only .js/.css files, print per-file stats, disable gzip calculation.

// vite.config.ts
import { defineConfig } from 'vite';
import { totalBundleSize } from 'vite-plugin-total-bundle-size';

export default defineConfig({
  plugins: [
    totalBundleSize({
      fileNameRegex: /\.(js|css)$/,
      printFileStats: true,
      calculateGzip: false,
    }),
  ],
});