Analyzing Bundle Sizes with Rollup and Webpack Visualizer0%
Concurrent Rendering with useTransition

Analyzing Bundle Sizes with Rollup and Webpack Visualizer

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Analyzing Bundle Sizes with Rollup and Webpack Visualizer

You cannot optimize what you do not measure. In modern frontend development, unintended transitive dependencies (such as un-treeshaken icon libraries, legacy date utilities, or duplicate package versions) can quietly inflate bundle sizes by hundreds of kilobytes. Bundle visualizer tooling provides interactive visual audits to diagnose and eliminate bundle bloat.

1. Why Visual Auditing is Essential

Without visual inspection, developers frequently introduce bloat inadvertently:

  • Importing { format } from 'date-fns' vs importing all locales.
  • Importing an entire icon library: import * as Icons from 'react-icons'.
  • Accidental dual packages: having both lodash and lodash-es in the build graph.
  • Unused polyfills included for modern browser targets.

2. Configuring Visualizer in Vite (rollup-plugin-visualizer)

In Vite projects, rollup-plugin-visualizer generates an interactive treemap diagram of every output chunk:

Bash / Terminal
npm install -D rollup-plugin-visualizer
TypeScript
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { visualizer } from "rollup-plugin-visualizer";
 
export default defineConfig({
plugins: [
react(),
visualizer({
filename: "dist/stats.html",
open: true, // Automatically opens visual report in default browser after build
gzipSize: true, // Displays estimated gzip size
brotliSize: true, // Displays estimated brotli compressed size
template: "treemap", // 'treemap' | 'sunburst' | 'network'
}),
],
});

Running npm run build outputs dist/stats.html, which renders an interactive nested treemap of every chunk and module.

3. Webpack Bundle Analyzer Configuration

For Webpack and Next.js applications, webpack-bundle-analyzer provides an equivalent visual inspection dashboard:

Bash / Terminal
npm install -D webpack-bundle-analyzer
JavaScript
// webpack.config.js
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
module.exports = {
plugins: [
process.env.ANALYZE === "true" &&
new BundleAnalyzerPlugin({
analyzerMode: "server",
analyzerPort: 8888,
openAnalyzer: true,
}),
].filter(Boolean),
};

4. Understanding Size Metrics: Stat vs Parsed vs Gzipped

When inspecting bundle reports, you will encounter three distinct metrics:

MetricMeaningOptimization Focus
Stat SizeRaw input size of unminified source code before transformations.Shows author-level code volume.
Parsed SizeOutput size after minification, dead code elimination, and bundling.The actual bytes the browser JavaScript engine must parse and compile.
Gzipped / Brotli SizeFinal wire size transferred over the network after HTTP compression.The actual bandwidth cost affecting download speed and First Contentful Paint.

5. Remediation Strategies for Common Bloat Findings

Anti-Pattern 1: Monolithic Lodash Import

TypeScript
// Bad: Pulls the entire 70KB Lodash library into the chunk
import _ from "lodash";
const clean = _.cloneDeep(data);
 
// Good: Tree-shakable ES module or direct subpath
import cloneDeep from "lodash/cloneDeep";
// Or using lodash-es with tree-shaking
import { cloneDeep } from "lodash-es";

Anti-Pattern 2: Bloated Moment.js with All Locales

TypeScript
// Bad: Moment.js bundles ~300KB of internationalization locales
import moment from "moment";
 
// Good: Replace with lightweight tree-shakable alternatives like Day.js or date-fns
import { format } from "date-fns";

Anti-Pattern 3: Bulk Icon Imports

TypeScript
// Bad: May bundle 5,000 icon SVG definitions
import * as Lucide from "lucide-react";
 
// Good: Direct cherry-picked import
import { CheckCircle2, AlertTriangle } from "lucide-react";
Interactive Quiz

Practice Quiz

Question 1
What does the "Gzipped Size" metric represent in bundle visualizers?
Question 2
Why is Moment.js notoriously flagged by bundle analyzers in modern React apps?
Question 3
What is the primary benefit of rollup-plugin-visualizer in a Vite project?
Question 4
If an analyzer reveals that both lodash and lodash-es are bundled in your application, what is the most likely cause?
Question 5
What is the difference between "Parsed Size" and "Stat Size"?
Next Lesson

Concurrent Rendering with useTransition

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Dynamic Imports and Prefetching StrategiesConcurrent Rendering with useTransition

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext