The technique every React Dev should use to measure bundle size in Vite

You’re changing everything in your React + Vite project — swapping libraries, changing strategies, refactoring the whole thing...

But do you actually know what that’s doing to your bundle?

Or are you just hoping it’s optimized?

Today, I’ll show you how to see it with your own eyes, using tools that reveal the impact of your decisions and even automate testing for you.

---

The Problem: Knowing What Actually Changed

You created a new branch, replaced Redux with Zustand, played with Tailwind, compared Headless UI with Radix... Cool!

But now what? Is your code lighter or just prettier?

Did a package bloat and you didn’t even notice?

Without measuring, it’s just guessing. And guesswork doesn’t scale.

---

What Will You Learn Today?

• How to peek inside your code backpack to see what's weighing it down
• How to test if your site is fast and user-friendly, Google-style
• How to put it all on autopilot with GitHub’s help

---

Let’s Get to Work

1. Checking Bundle Size with Visualizer

I installed the magnifying glass (plugin) to see what’s inside my bundle:

npm install -D rollup-plugin-visualizer

2. Configuring vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),
    visualizer({
      filename: './dist/report.html',
      template: 'treemap',
      gzipSize: true,
      brotliSize: true,
    })
  ],
  build: {
    sourcemap: true
  }
});

Then I ran the build:

npm run build

Now just to open dist/report.html and take a look:

• Which libraries are in your project?
• Which one takes up the most space?
• Is there duplication? Any code you're not using anymore?

💡 Pro tip: use the 'treemap' template for clearer insights. The 'raw-data' one is too raw and can be confusing.

---

2. Automatiing the analysis with GitHub Actions

You know when you open a PR and a bot comments with a bundle summary? That's what we're building.

GitHub Actions lets you automate any part of your development cycle.

I created a .github/workflows/bundle-report.yml file with a script that grabs Visualizer data and posts a clean summary on the PR, like this:

name: Analyze Bundle Size and Lighthouse

on:
  pull_request:
    branches: [main]

permissions:
  pull-requests: write
  contents: read

jobs:
  analyze-bundle:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout PR branch
        uses: actions/checkout@v4
...

Here's the result:

Before

After

---

3. Testing performance with Lighthouse CI

Lighthouse is like a strict teacher that grades your site’s performance, accessibility, SEO, and more.

We’ll use Lighthouse CI to automate this via GitHub.

Create a lighthouserc.js file at the project root:

export default {
    ci: {
        collect: {
            url: ['http://localhost:4173/'],
            startServerCommand: 'pnpm run preview',
            startServerReadyPattern: 'Local:'
        },
        upload: {
            target: 'temporary-public-storage',
        },
        assert: {
            preset: 'lighthouse:recommended'
          },
    },
};

Then add a new job to the GitHub Actions file:

lhci:
    name: Lighthouse
    runs-on: ubuntu-latest

    steps:
      - name: Checkout PR branch
        uses: actions/checkout@v4

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10
          run_install: false

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "pnpm"

      - name: Install dependencies and build
        run: |
          pnpm install
          pnpm run build

      - name: run Lighthouse CI
        run: |
          pnpm install -g @lhci/cli@0.14.x
          lhci autorun

Done! Now, every time you open a PR to main, the bot will:

• Measure the bundle size
• Evaluate your site’s quality
• Post a summary directly in the PR

---

Final Thoughts

Swapping libraries isn’t magic.
You don’t guess performance — you measure it.

Tools like rollup-plugin-visualizer and Lighthouse CI give you clarity and control.
And with GitHub Actions, you turn that into superpowers.

Got questions? Feel free to reach out.

Want to see the final result? Comment ‘REPO’ and I’ll send you the link.

See you next time!

Comments

[Michael Liang]

This is really interesting post.
Could you share github repo?
REPO

[Werliton Silva]

Wow. Cool.

Here the repo link, my bro:

ws-boilerplate-vite-react

[Michael Liang]

Thanks

[Michael Liang]

Hi Werliton,
I have checked the repo, but I am not good at Portuguese.
Can we discuss more about this on discord?

[Werliton Silva]

Wow, I'm sorry. Of course. I'll be working on this.

[Michael Liang]

Thanks. can you please check your email?

[Werliton Silva]

Wow. I see, but I am going to active my discord again.

[Michael Liang]

Please send me dm when you are free. Thanks

[Michael Liang]

Vite is really faster than any frameworks.
Why do you think vite is faster than others? is it related to bundle?

[Werliton Silva]

Great question. I'll even bring an excerpt from the Vite documentation to answer it.
...
"Vite pre-bundles dependencies using esbuild. esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers."

[Werliton Silva]

Guys, here is the repo link:

ws-boilerplate-vite-react