Skip to content

Commit 8bd22f0

Browse files
fjcalzadofjcalzado
committed
bundle analyzer for vite, draft sample
1 parent cc64bc7 commit 8bd22f0

13 files changed

Lines changed: 217 additions & 0 deletions

File tree

‎03-bundling/06-vite/11-bundle-analyzer/.env‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
VITE_API_BASE=http://localhost:8080
2+
VITE_ENABLE_FEATURE_A=true

‎03-bundling/06-vite/11-bundle-analyzer/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Bundle Analyzer
2+
3+
For the next example, let's install and use a bundle analyzer to inspect the internal content of our bundles.
4+
5+
📌 We start from sample `10-code-splitting`.
6+
7+
# Steps to build it
8+
9+
## Prerequisites
10+
11+
Install [Node.js and npm](https://nodejs.org/en/) (20.19.0 || >=22.12.0) if they are not already installed on your computer.
12+
13+
> ⚠ Verify that you are running at least latest Node LTS version and npm. You can check your current version by running `node -v` and `npm -v` in a terminal/console window. Older versions may produce errors.
14+
15+
## Steps
16+
17+
- We start from `10-code-splitting`. Just copy the project and install:
18+
19+
```bash
20+
npm install
21+
```
22+
23+
- Before we proceed with this tool, here goes a brief introduction why they are so useful and widely used:
24+
25+
> ℹ️ A bundle analyzer or visualizer is a tool that help us to understand the contents of bundles generated by our bundler. It visually displays how modules and dependecies are distributed within the bundle, showing its relationships and the size of each package, allowing us to:
26+
>
27+
> - Reduce the final bundle size.
28+
> - Detect unnecessary or too heavy dependencies.
29+
> - Improve load times and user experience.
30+
>
31+
> These tools are critical to manually increase application performance before we commit to production, and, therefore, they are usually applied over production bundles only.
32+
>
33+
> There are different libraries out there, like `rollup-plugin-visualizer`, `vite-bundle-analyzer`, etc. We will use the first one for this sample.
34+
35+
- Given these tools are usually plug and play, their usage is as simple as installing it first:
36+
37+
```bash
38+
npm install rollup-plugin-visualizer --save-dev
39+
```
40+
41+
- And then, use it as a plugin in `vite.config.js`:
42+
43+
_vite.config.js_
44+
45+
```diff
46+
import { defineConfig } from "vite";
47+
import checker from "vite-plugin-checker";
48+
import react from "@vitejs/plugin-react";
49+
import tailwindcss from "@tailwindcss/vite";
50+
+ import { visualizer } from "rollup-plugin-visualizer";
51+
52+
export default defineConfig({
53+
plugins: [
54+
checker({ typescript: true }),
55+
tailwindcss(),
56+
react(),
57+
+ visualizer(),
58+
],
59+
});
60+
```

‎03-bundling/06-vite/11-bundle-analyzer/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html
3+
lang="en"
4+
class="p-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200"
5+
data-theme="dark"
6+
>
7+
<head>
8+
<meta charset="UTF-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<title>Vite App</title>
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="module" src="/src/index.tsx"></script>
15+
</body>
16+
</html>

‎03-bundling/06-vite/11-bundle-analyzer/package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "hello-vite",
3+
"private": true,
4+
"type": "module",
5+
"version": "0.0.0",
6+
"description": "Let's start with a very basic sample, just add an html plus a simple console log (E5). This is what you can find in the getting started tutorial.",
7+
"scripts": {
8+
"start": "vite --host",
9+
"build": "vite build",
10+
"preview": "vite preview"
11+
},
12+
"devDependencies": {
13+
"@tailwindcss/vite": "^4.1.11",
14+
"@types/react": "^19.1.8",
15+
"@types/react-dom": "^19.1.6",
16+
"@vitejs/plugin-react": "^4.6.0",
17+
"rollup-plugin-visualizer": "^6.0.3",
18+
"typescript": "^5.8.3",
19+
"vite": "^7.0.4",
20+
"vite-bundle-analyzer": "^1.1.0",
21+
"vite-plugin-checker": "^0.10.0"
22+
},
23+
"dependencies": {
24+
"react": "^19.1.0",
25+
"react-dom": "^19.1.0",
26+
"tailwindcss": "^4.1.11"
27+
}
28+
}

‎03-bundling/06-vite/11-bundle-analyzer/src/env-config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const config = {
2+
API_BASE: import.meta.env.VITE_API_BASE,
3+
IS_FEATURE_A_ENABLED: import.meta.env.VITE_ENABLE_FEATURE_A === "true",
4+
} as const;
5+
6+
export default config;

‎03-bundling/06-vite/11-bundle-analyzer/src/hello.module.css‎

Whitespace-only changes.

‎03-bundling/06-vite/11-bundle-analyzer/src/hello.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { FC, useEffect, useState } from "react";
2+
import config from "./env-config";
3+
4+
export const HelloComponent: FC = () => {
5+
const [counter, setCounter] = useState(0);
6+
7+
useEffect(() => {
8+
const timer = setInterval(() => {
9+
setCounter((prev) => prev + 1);
10+
}, 1_000);
11+
12+
return () => clearInterval(timer);
13+
}, []);
14+
15+
const applyOperation = async () => {
16+
const { operate } = await import("./math");
17+
setCounter((prevCounter) => operate(prevCounter));
18+
};
19+
20+
return (
21+
<>
22+
<h2>Hello from React</h2>
23+
<p>Api server is {config.API_BASE}</p>
24+
<p>Feature A is {config.IS_FEATURE_A_ENABLED ? "enabled" : "disabled"}</p>
25+
<p>Counter state: {counter}</p>
26+
<button
27+
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
28+
onClick={applyOperation}
29+
>
30+
Apply operation
31+
</button>
32+
<a
33+
href="#"
34+
className="m-2 block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
35+
>
36+
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
37+
Card title
38+
</h5>
39+
<p className="font-normal text-gray-700 dark:text-gray-400">
40+
Some quick example text to build on the card title and make up the
41+
bulk of the card's content.
42+
</p>
43+
</a>
44+
</>
45+
);
46+
};

‎03-bundling/06-vite/11-bundle-analyzer/src/index.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createRoot } from "react-dom/client";
2+
import { HelloComponent } from "./hello";
3+
import "./styles.css";
4+
5+
const root = createRoot(document.getElementById("root"));
6+
7+
root.render(<HelloComponent />);

‎03-bundling/06-vite/11-bundle-analyzer/src/math.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const randomBetween = (min: number, max: number) =>
2+
Math.floor(Math.random() * (max - min + 1)) + min;
3+
4+
export const operate = (n: number): number => {
5+
const base = Math.min(n, randomBetween(0, 50));
6+
const multiplier = randomBetween(1, 15);
7+
return base + multiplier;
8+
};

‎03-bundling/06-vite/11-bundle-analyzer/src/styles.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "tailwindcss";
2+
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

0 commit comments

Comments
 (0)