|
1 | | -# @code-pushup/bundle-stats-plugin |
| 1 | +# Contributing |
2 | 2 |
|
3 | | -## Data Processing pipeline |
| 3 | +## Development |
4 | 4 |
|
5 | | -1. `bundle-stats` plugin collects bundle stats from the build output. |
6 | | -2. `bundle-stats` plugin processes the stats and creates a unified tree. |
7 | | -3. `bundle-stats` plugin filters the tree by the config. |
8 | | -4. `bundle-stats` plugin creates a report. |
| 5 | +### Running the plugin |
9 | 6 |
|
10 | | -## Data Processing pipeline |
11 | | - |
12 | | -1. `bundle-stats` plugin collects bundle stats from the build output. |
13 | | - |
14 | | -## Data |
15 | | - |
16 | | -Great question — understanding the difference between imports and inputs is essential when analyzing bundler output (especially from tools like esbuild, webpack, or Rollup). Here's a clear breakdown: |
17 | | - |
18 | | -# Bundle Stats Data Structure |
19 | | - |
20 | | -## Imports vs Inputs |
21 | | - |
22 | | -Understanding the difference between **imports** and **inputs** is essential when analyzing bundler output. |
23 | | - |
24 | | -### 🔗 Imports |
25 | | - |
26 | | -**What:** Links between output files (chunk-to-chunk dependencies) |
27 | | - |
28 | | -**Example:** |
29 | | - |
30 | | -```typescript |
31 | | -// dynamic import |
32 | | -import { something } from './shared.js'; |
33 | | - |
34 | | -// If main.js has these imports: |
35 | | -import('./route1'); // dynamic import |
36 | | -// static import |
| 7 | +```bash |
| 8 | +nx code-pushup plugin-bundle-stats |
37 | 9 | ``` |
38 | 10 |
|
39 | | -**ESBuild stats:** |
40 | | - |
41 | | -```typescript |
42 | | -"main-TVMA6NI7.js": { |
43 | | - imports: [ |
44 | | - { path: "chunk-5QRGP6BJ.js", kind: "import-statement" }, |
45 | | - { path: "chunk-NY7Q4ZJ6.js", kind: "dynamic-import" } |
46 | | - ] |
47 | | -} |
| 11 | +```bash |
| 12 | +npx @code-pushup/cli collect --config packages/plugin-bundle-stats/code-pushup.config.ts |
48 | 13 | ``` |
49 | | - |
50 | | -**Purpose:** Build dependency graph between chunks at runtime |
51 | | - |
52 | | -### 📁 Inputs |
53 | | - |
54 | | -**What:** Original source files bundled into a specific output |
55 | | - |
56 | | -**Example:** |
57 | | - |
58 | | -```typescript |
59 | | -// If main-TVMA6NI7.js was generated from: |
60 | | -// - src/main.ts |
61 | | -// - src/app/app.component.ts |
62 | | -// - node_modules/@angular/core/core.mjs |
63 | | -``` |
64 | | - |
65 | | -**ESBuild stats:** |
66 | | - |
67 | | -```typescript |
68 | | -"main-TVMA6NI7.js": { |
69 | | - inputs: { |
70 | | - "src/main.ts": { bytesInOutput: 37 }, |
71 | | - "node_modules/@angular/router/router.mjs": { bytesInOutput: 64170 } |
72 | | - } |
73 | | -} |
74 | | -``` |
75 | | - |
76 | | -**Purpose:** Analyze file contributions and size breakdown |
77 | | - |
78 | | -### Summary |
79 | | - |
80 | | -| Concept | Meaning | Granularity | Example | |
81 | | -| ---------- | ------------------------------ | -------------- | ------------------------------ | |
82 | | -| **Import** | Link to another output chunk | Chunk-to-chunk | `main.js` → `route1.js` | |
83 | | -| **Input** | Source file bundled into chunk | File-to-chunk | `src/main.ts`, `rxjs/index.js` | |
84 | | - |
85 | | -> **💡 Quick tip:** Imports = dependency graph • Inputs = size analysis |
0 commit comments