Skip to content

Commit b539f42

Browse files
committed
docs: update CONTRIBUTING.md
1 parent faa4599 commit b539f42

File tree

1 file changed

+7
-79
lines changed

1 file changed

+7
-79
lines changed
Lines changed: 7 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,13 @@
1-
# @code-pushup/bundle-stats-plugin
1+
# Contributing
22

3-
## Data Processing pipeline
3+
## Development
44

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
96

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
379
```
3810

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
4813
```
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

Comments
 (0)