proagents 1.6.20 → 1.6.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/.claude/settings.local.json +3 -1
  2. package/.proagents/.cursorrules +1 -1
  3. package/.proagents/.windsurfrules +1 -1
  4. package/.proagents/AGENTS.md +1 -1
  5. package/.proagents/AI_INSTRUCTIONS.md +29 -1
  6. package/.proagents/BOLT.md +1 -1
  7. package/.proagents/CLAUDE.md +1 -1
  8. package/.proagents/GEMINI.md +1 -1
  9. package/.proagents/KIRO.md +1 -1
  10. package/.proagents/LOVABLE.md +1 -1
  11. package/.proagents/REPLIT.md +1 -1
  12. package/.proagents/custom-commands.yaml +1 -2
  13. package/.proagents/docs/command-details.md +1 -2
  14. package/.proagents/getting-started/ai-training-setup.md +0 -1
  15. package/.proagents/performance/README.md +59 -0
  16. package/.proagents/performance/bundle-analysis.md +375 -0
  17. package/.proagents/performance/load-testing.md +563 -0
  18. package/.proagents/performance/runtime-metrics.md +489 -0
  19. package/.proagents/performance/web-vitals.md +425 -0
  20. package/.proagents/proagents.config.yaml +55 -1
  21. package/.proagents/prompts/11-session-tracking.md +100 -0
  22. package/.proagents/prompts/13-commit.md +426 -0
  23. package/.proagents/workflow-modes/entry-modes.md +1 -6
  24. package/COMMANDS.md +19 -0
  25. package/lib/commands/init.js +62 -11
  26. package/package.json +1 -1
  27. package/.proagents/api-versioning/README.md +0 -257
  28. package/.proagents/api-versioning/changelog-template.md +0 -225
  29. package/.proagents/api-versioning/deprecation-workflow.md +0 -470
  30. package/.proagents/api-versioning/versioning-strategy.md +0 -291
  31. package/.proagents/automation/README.md +0 -38
  32. package/.proagents/automation/ai-behavior-rules.md +0 -339
  33. package/.proagents/automation/ai-prompt-injection.md +0 -331
  34. package/.proagents/automation/auto-decisions.md +0 -535
  35. package/.proagents/automation/decision-defaults.yaml +0 -317
  36. package/.proagents/cache/README.md +0 -110
  37. package/.proagents/cache/analysis-metadata.json +0 -76
  38. package/.proagents/cache/conventions.json +0 -125
  39. package/.proagents/cache/dependencies.json +0 -85
  40. package/.proagents/cache/features.json +0 -115
  41. package/.proagents/cache/patterns.json +0 -105
  42. package/.proagents/cache/schemas/conventions-schema.json +0 -138
  43. package/.proagents/cache/schemas/dependencies-schema.json +0 -95
  44. package/.proagents/cache/schemas/features-schema.json +0 -104
  45. package/.proagents/cache/schemas/metadata-schema.json +0 -83
  46. package/.proagents/cache/schemas/patterns-schema.json +0 -136
  47. package/.proagents/cache/schemas/structure-schema.json +0 -72
  48. package/.proagents/cache/structure.json +0 -109
  49. package/.proagents/checklists/README.md +0 -261
  50. package/.proagents/checklists/code-quality.md +0 -137
  51. package/.proagents/checklists/code-review.md +0 -148
  52. package/.proagents/checklists/pr-checklist.md +0 -78
  53. package/.proagents/checklists/pre-deployment.md +0 -132
  54. package/.proagents/checklists/pre-implementation.md +0 -80
  55. package/.proagents/checklists/testing.md +0 -120
  56. package/.proagents/checkpoints.json +0 -13
  57. package/.proagents/cicd/README.md +0 -338
  58. package/.proagents/cicd/azure-devops.md +0 -267
  59. package/.proagents/cicd/github-actions.md +0 -375
  60. package/.proagents/cicd/gitlab-ci.md +0 -278
  61. package/.proagents/cicd/jenkins.md +0 -317
  62. package/.proagents/collaboration/README.md +0 -143
  63. package/.proagents/collaboration/roles.md +0 -248
  64. package/.proagents/collaboration/sessions.md +0 -390
  65. package/.proagents/collaboration/sync.md +0 -358
  66. package/.proagents/cost/README.md +0 -48
  67. package/.proagents/cost/cost-template.md +0 -283
  68. package/.proagents/cost/estimation-framework.md +0 -287
  69. package/.proagents/database/README.md +0 -72
  70. package/.proagents/database/examples/001-create-users.sql +0 -129
  71. package/.proagents/database/examples/002-add-preferences.sql +0 -94
  72. package/.proagents/database/examples/003-add-index.sql +0 -105
  73. package/.proagents/database/examples/004-rename-column.sql +0 -122
  74. package/.proagents/database/examples/005-add-foreign-key.sql +0 -142
  75. package/.proagents/database/examples/006-data-migration.sql +0 -196
  76. package/.proagents/database/examples/007-drop-column.sql +0 -163
  77. package/.proagents/database/examples/README.md +0 -89
  78. package/.proagents/database/migration-workflow.md +0 -478
  79. package/.proagents/database/rollback-scripts.md +0 -487
  80. package/.proagents/database/safety-checks.md +0 -447
  81. package/.proagents/git/README.md +0 -68
  82. package/.proagents/git/branch-strategy.md +0 -164
  83. package/.proagents/git/commit-conventions.md +0 -241
  84. package/.proagents/git/pr-workflow.md +0 -286
  85. package/.proagents/git/rollback-procedures.md +0 -416
  86. package/.proagents/ide-integration/README.md +0 -124
  87. package/.proagents/ide-integration/cline-config.md +0 -429
  88. package/.proagents/ide-integration/continue-config.md +0 -380
  89. package/.proagents/ide-integration/cursor-rules.md +0 -280
  90. package/.proagents/ide-integration/github-copilot.md +0 -384
  91. package/.proagents/ide-integration/windsurf-rules.md +0 -314
  92. package/.proagents/integrations/README.md +0 -97
  93. package/.proagents/integrations/pm/README.md +0 -344
  94. package/.proagents/learning/README.md +0 -136
  95. package/.proagents/learning/adaptation.md +0 -305
  96. package/.proagents/learning/data-collection.md +0 -283
  97. package/.proagents/learning/implementation-guide.md +0 -865
  98. package/.proagents/learning/reports.md +0 -306
  99. package/.proagents/mcp/README.md +0 -133
  100. package/.proagents/mcp/context-providers.md +0 -442
  101. package/.proagents/mcp/server-config.md +0 -306
  102. package/.proagents/mcp/tools-definition.md +0 -513
  103. package/.proagents/pm-integration/README.md +0 -151
  104. package/.proagents/pm-integration/asana.md +0 -346
  105. package/.proagents/pm-integration/github-issues.md +0 -308
  106. package/.proagents/pm-integration/gitlab-issues.md +0 -482
  107. package/.proagents/pm-integration/jira.md +0 -364
  108. package/.proagents/pm-integration/linear.md +0 -409
  109. package/.proagents/pm-integration/notion.md +0 -275
  110. package/.proagents/pm-integration/sync-config.md +0 -533
  111. package/.proagents/pm-integration/trello.md +0 -159
  112. package/.proagents/rules/README.md +0 -179
  113. package/.proagents/rules/custom-rules-template.yaml +0 -286
  114. package/.proagents/rules/custom-rules.md +0 -754
  115. package/.proagents/rules/validation-rules-template.yaml +0 -517
  116. package/.proagents/runbooks/README.md +0 -219
  117. package/.proagents/runbooks/dependency-vulnerability.md +0 -505
  118. package/.proagents/runbooks/incident-response.md +0 -451
  119. package/.proagents/runbooks/performance-degradation.md +0 -584
  120. package/.proagents/runbooks/production-debugging.md +0 -489
  121. package/.proagents/sessions/README.md +0 -5
  122. package/.proagents/sprints/README.md +0 -58
  123. package/.proagents/team/README.md +0 -256
  124. package/.proagents/team/code-ownership.md +0 -306
  125. package/.proagents/team/communication-templates.md +0 -441
  126. package/.proagents/team/handoff-protocol.md +0 -380
  127. package/.proagents/team/ide-setup/README.md +0 -103
  128. package/.proagents/team/ide-setup/cursor.md +0 -276
  129. package/.proagents/team/ide-setup/jetbrains.md +0 -330
  130. package/.proagents/team/ide-setup/neovim.md +0 -640
  131. package/.proagents/team/ide-setup/vscode.md +0 -348
  132. package/.proagents/team/onboarding.md +0 -278
  133. package/.proagents/time-tracking.json +0 -19
  134. package/.proagents/troubleshooting/README.md +0 -730
  135. package/.proagents/troubleshooting/ai-issues.md +0 -601
  136. package/.proagents/troubleshooting/workflow-issues.md +0 -571
@@ -175,7 +175,9 @@
175
175
  "Bash(git -C /Users/prakash/Saeculum/AI/proAgents diff lib/commands/ai.js)",
176
176
  "Bash(for f in .proagents/AI_INSTRUCTIONS.md .proagents/CLAUDE.md .proagents/AGENTS.md .proagents/.cursorrules .proagents/.windsurfrules .proagents/GEMINI.md .proagents/BOLT.md .proagents/REPLIT.md .proagents/LOVABLE.md .proagents/KIRO.md)",
177
177
  "Bash(if grep -q \"AI directives\" \"$f\")",
178
- "Bash(if grep -q \"ANY.*pa:.*command\" \"$f\")"
178
+ "Bash(if grep -q \"ANY.*pa:.*command\" \"$f\")",
179
+ "Bash(git worktree:*)",
180
+ "Bash(git worktree add:*)"
179
181
  ]
180
182
  }
181
183
  }
@@ -33,7 +33,7 @@ Commands that only READ, DISPLAY, or CONFIGURE:
33
33
  - **Skip AFTER step** - No logging needed
34
34
 
35
35
  **Examples:** `pa:help`, `pa:status`, `pa:progress`, `pa:history`,
36
- `pa:ai-*`, `pa:config-*`, `pa:sync`
36
+ `pa:ai-*`, `pa:config-*`, `pa:sync`, `pa:commit`, `pa:commit-config`
37
37
 
38
38
  ### AFTER Workflow Commands (Auto-Log)
39
39
 
@@ -33,7 +33,7 @@ Commands that only READ, DISPLAY, or CONFIGURE:
33
33
  - **Skip AFTER step** - No logging needed
34
34
 
35
35
  **Examples:** `pa:help`, `pa:status`, `pa:progress`, `pa:history`,
36
- `pa:ai-*`, `pa:config-*`, `pa:sync`
36
+ `pa:ai-*`, `pa:config-*`, `pa:sync`, `pa:commit`, `pa:commit-config`
37
37
 
38
38
  ### AFTER Workflow Commands (Auto-Log)
39
39
 
@@ -37,7 +37,7 @@ Commands that only READ, DISPLAY, or CONFIGURE:
37
37
  - **Skip AFTER step** - No logging needed
38
38
 
39
39
  **Examples:** `pa:help`, `pa:status`, `pa:progress`, `pa:history`,
40
- `pa:ai-*`, `pa:config-*`, `pa:sync`
40
+ `pa:ai-*`, `pa:config-*`, `pa:sync`, `pa:commit`, `pa:commit-config`
41
41
 
42
42
  ### AFTER Workflow Commands (Auto-Log)
43
43
 
@@ -35,7 +35,7 @@ Commands that only READ, DISPLAY, or CONFIGURE:
35
35
  - **Skip AFTER step** - No logging needed
36
36
 
37
37
  **Examples:** `pa:help`, `pa:status`, `pa:progress`, `pa:history`,
38
- `pa:ai-*`, `pa:config-*`, `pa:sync`
38
+ `pa:ai-*`, `pa:config-*`, `pa:sync`, `pa:commit`, `pa:commit-config`
39
39
 
40
40
  ### AFTER Workflow Commands (Auto-Log)
41
41
 
@@ -470,6 +470,21 @@ Auto-detect issue numbers from user input and include in changelog:
470
470
 
471
471
  ---
472
472
 
473
+ ## Smart Workflow & Worktrees
474
+
475
+ For smart workflow mode and worktree management:
476
+
477
+ **See:** `./.proagents/prompts/11-session-tracking.md`
478
+
479
+ ### Quick Reference
480
+
481
+ | Feature | Description |
482
+ |---------|-------------|
483
+ | Smart Workflow | Small task → auto branch, Large task → ask user |
484
+ | Worktrees | Isolated directories for large/parallel tasks |
485
+
486
+ ---
487
+
473
488
  ## Command Quick Reference
474
489
 
475
490
  ### Aliases
@@ -488,6 +503,7 @@ Auto-detect issue numbers from user input and include in changelog:
488
503
  | `pa:rev` | `pa:review` |
489
504
  | `pa:dbg` | `pa:debug` |
490
505
  | `pa:l` | `pa:logs` |
506
+ | `pa:c` | `pa:commit` |
491
507
 
492
508
  ### Core Commands
493
509
  | Command | Action |
@@ -592,6 +608,13 @@ Auto-detect issue numbers from user input and include in changelog:
592
608
  | `pa:changelog-module X` | View module changelog |
593
609
  | `pa:error "desc"` | Log error and solution |
594
610
 
611
+ ### Worktree Commands
612
+ | Command | Action |
613
+ |---------|--------|
614
+ | `pa:worktree-create "name"` | Create worktree for large task |
615
+ | `pa:worktree-list` | List all active worktrees |
616
+ | `pa:worktree-remove "name"` | Remove worktree after merge |
617
+
595
618
  ### Configuration
596
619
  | Command | Action |
597
620
  |---------|--------|
@@ -691,6 +714,8 @@ When user types a `pa:` command:
691
714
  | `pa:ai-add` | `./prompts/ai-add.md` |
692
715
  | `pa:ai-remove` | `./prompts/ai-remove.md` |
693
716
  | `pa:ai-sync` | `./prompts/ai-sync.md` |
717
+ | `pa:commit` | `./prompts/13-commit.md` |
718
+ | `pa:commit-config` | `./prompts/13-commit.md` |
694
719
 
695
720
  ---
696
721
 
@@ -762,6 +787,9 @@ ProAgents Help
762
787
  pa:resume Quick resume with next action
763
788
  pa:handoff Create handoff notes
764
789
  pa:conflict-check Check for conflicts
790
+ pa:worktree-create Create worktree for large task
791
+ pa:worktree-list List all active worktrees
792
+ pa:worktree-remove Remove worktree after merge
765
793
 
766
794
  Learning & Tracking:
767
795
  pa:feedback "text" Log feedback for AI learning
@@ -33,7 +33,7 @@ Commands that only READ, DISPLAY, or CONFIGURE:
33
33
  - **Skip AFTER step** - No logging needed
34
34
 
35
35
  **Examples:** `pa:help`, `pa:status`, `pa:progress`, `pa:history`,
36
- `pa:ai-*`, `pa:config-*`, `pa:sync`
36
+ `pa:ai-*`, `pa:config-*`, `pa:sync`, `pa:commit`, `pa:commit-config`
37
37
 
38
38
  ### AFTER Workflow Commands (Auto-Log)
39
39
 
@@ -33,7 +33,7 @@ Commands that only READ, DISPLAY, or CONFIGURE:
33
33
  - **Skip AFTER step** - No logging needed
34
34
 
35
35
  **Examples:** `pa:help`, `pa:status`, `pa:progress`, `pa:history`,
36
- `pa:ai-*`, `pa:config-*`, `pa:sync`
36
+ `pa:ai-*`, `pa:config-*`, `pa:sync`, `pa:commit`, `pa:commit-config`
37
37
 
38
38
  ### AFTER Workflow Commands (Auto-Log)
39
39
 
@@ -33,7 +33,7 @@ Commands that only READ, DISPLAY, or CONFIGURE:
33
33
  - **Skip AFTER step** - No logging needed
34
34
 
35
35
  **Examples:** `pa:help`, `pa:status`, `pa:progress`, `pa:history`,
36
- `pa:ai-*`, `pa:config-*`, `pa:sync`
36
+ `pa:ai-*`, `pa:config-*`, `pa:sync`, `pa:commit`, `pa:commit-config`
37
37
 
38
38
  ### AFTER Workflow Commands (Auto-Log)
39
39
 
@@ -33,7 +33,7 @@ Commands that only READ, DISPLAY, or CONFIGURE:
33
33
  - **Skip AFTER step** - No logging needed
34
34
 
35
35
  **Examples:** `pa:help`, `pa:status`, `pa:progress`, `pa:history`,
36
- `pa:ai-*`, `pa:config-*`, `pa:sync`
36
+ `pa:ai-*`, `pa:config-*`, `pa:sync`, `pa:commit`, `pa:commit-config`
37
37
 
38
38
  ### AFTER Workflow Commands (Auto-Log)
39
39
 
@@ -33,7 +33,7 @@ Commands that only READ, DISPLAY, or CONFIGURE:
33
33
  - **Skip AFTER step** - No logging needed
34
34
 
35
35
  **Examples:** `pa:help`, `pa:status`, `pa:progress`, `pa:history`,
36
- `pa:ai-*`, `pa:config-*`, `pa:sync`
36
+ `pa:ai-*`, `pa:config-*`, `pa:sync`, `pa:commit`, `pa:commit-config`
37
37
 
38
38
  ### AFTER Workflow Commands (Auto-Log)
39
39
 
@@ -33,7 +33,7 @@ Commands that only READ, DISPLAY, or CONFIGURE:
33
33
  - **Skip AFTER step** - No logging needed
34
34
 
35
35
  **Examples:** `pa:help`, `pa:status`, `pa:progress`, `pa:history`,
36
- `pa:ai-*`, `pa:config-*`, `pa:sync`
36
+ `pa:ai-*`, `pa:config-*`, `pa:sync`, `pa:commit`, `pa:commit-config`
37
37
 
38
38
  ### AFTER Workflow Commands (Auto-Log)
39
39
 
@@ -25,7 +25,7 @@ standup:
25
25
  sprint_review:
26
26
  description: "Generate sprint review summary"
27
27
  steps:
28
- - "Read all session summaries from ./.proagents/sessions/"
28
+ - "Read all session summaries from ./.proagents/worklog/"
29
29
  - "Read ./CHANGELOG.md for completed features"
30
30
  - "Generate sprint review with completed items, metrics, and highlights"
31
31
  output: "./.proagents/sprint-reviews/YYYY-MM-DD.md"
@@ -43,7 +43,6 @@ tech_debt:
43
43
  security_scan:
44
44
  description: "Run security checklist"
45
45
  steps:
46
- - "Read ./.proagents/checklists/security.md"
47
46
  - "Check for hardcoded secrets in code"
48
47
  - "Review authentication/authorization code"
49
48
  - "Generate security report"
@@ -316,8 +316,7 @@ Next: pa:test (full suite) or pa:commit
316
316
  - Code patterns
317
317
  - Dependencies
318
318
  - Architecture style
319
- 4. Cache results in `./.proagents/cache/`
320
- 5. Output analysis summary
319
+ 4. Output analysis summary
321
320
 
322
321
  ### pa:requirements
323
322
 
@@ -377,4 +377,3 @@ learning:
377
377
 
378
378
  - [Configure IDE](./ide-setup.md)
379
379
  - [Set up standards](../standards/)
380
- - [Review AI training details](../ai-training/)
@@ -0,0 +1,59 @@
1
+ # Performance Monitoring
2
+
3
+ Bundle analysis, runtime metrics, and load testing.
4
+
5
+ ---
6
+
7
+ ## Overview
8
+
9
+ Track and optimize application performance throughout development.
10
+
11
+ ## Documentation
12
+
13
+ | Document | Description |
14
+ |----------|-------------|
15
+ | [Bundle Analysis](./bundle-analysis.md) | JavaScript bundle size optimization |
16
+ | [Web Vitals](./web-vitals.md) | Core Web Vitals monitoring |
17
+ | [Runtime Metrics](./runtime-metrics.md) | Application performance metrics |
18
+ | [Load Testing](./load-testing.md) | Stress testing and benchmarks |
19
+
20
+ ## Quick Start
21
+
22
+ ```bash
23
+ # Analyze bundle size
24
+ proagents perf bundle
25
+
26
+ # Check Web Vitals
27
+ proagents perf vitals
28
+
29
+ # Run load test
30
+ proagents perf load-test --users 100
31
+ ```
32
+
33
+ ## Key Metrics
34
+
35
+ | Metric | Target | Tool |
36
+ |--------|--------|------|
37
+ | FCP | < 1.8s | Lighthouse |
38
+ | LCP | < 2.5s | Core Web Vitals |
39
+ | CLS | < 0.1 | Core Web Vitals |
40
+ | Bundle Size | < 200KB | webpack-bundle-analyzer |
41
+
42
+ ## Configuration
43
+
44
+ ```yaml
45
+ # proagents.config.yaml
46
+ performance:
47
+ bundle:
48
+ max_size: "200KB"
49
+ warn_at: "150KB"
50
+
51
+ vitals:
52
+ fcp_target: 1800
53
+ lcp_target: 2500
54
+ cls_target: 0.1
55
+
56
+ regression:
57
+ block_on_regression: true
58
+ threshold: 10 # percent
59
+ ```
@@ -0,0 +1,375 @@
1
+ # Bundle Analysis Guide
2
+
3
+ Analyze and optimize your application bundle size.
4
+
5
+ ---
6
+
7
+ ## Overview
8
+
9
+ Bundle analysis helps identify:
10
+ - Large dependencies
11
+ - Unused code (dead code)
12
+ - Duplicate modules
13
+ - Optimization opportunities
14
+
15
+ ---
16
+
17
+ ## Analysis Tools
18
+
19
+ ### webpack-bundle-analyzer
20
+
21
+ ```bash
22
+ # Install
23
+ npm install --save-dev webpack-bundle-analyzer
24
+
25
+ # Add to webpack config
26
+ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
27
+
28
+ module.exports = {
29
+ plugins: [
30
+ new BundleAnalyzerPlugin({
31
+ analyzerMode: 'static',
32
+ reportFilename: 'bundle-report.html',
33
+ openAnalyzer: false,
34
+ })
35
+ ]
36
+ };
37
+
38
+ # Or run as CLI
39
+ npx webpack-bundle-analyzer stats.json
40
+ ```
41
+
42
+ ### source-map-explorer
43
+
44
+ ```bash
45
+ # Install
46
+ npm install --save-dev source-map-explorer
47
+
48
+ # Generate source maps and analyze
49
+ npm run build
50
+ npx source-map-explorer 'build/static/js/*.js'
51
+ ```
52
+
53
+ ### bundlephobia
54
+
55
+ Check package sizes before installing:
56
+ - Visit: https://bundlephobia.com/
57
+ - Search for package name
58
+ - See minified + gzipped size
59
+ - See download time estimates
60
+
61
+ ---
62
+
63
+ ## Bundle Size Budgets
64
+
65
+ ### Recommended Budgets
66
+
67
+ | Category | Target | Warning | Error |
68
+ |----------|--------|---------|-------|
69
+ | Initial JS | < 100KB | > 150KB | > 200KB |
70
+ | Initial CSS | < 50KB | > 75KB | > 100KB |
71
+ | Total Initial | < 150KB | > 250KB | > 350KB |
72
+ | Per-route chunk | < 50KB | > 75KB | > 100KB |
73
+ | Image | < 100KB | > 200KB | > 500KB |
74
+
75
+ ### Configure Bundle Budgets
76
+
77
+ ```javascript
78
+ // webpack.config.js
79
+ module.exports = {
80
+ performance: {
81
+ maxEntrypointSize: 250000, // 250KB
82
+ maxAssetSize: 100000, // 100KB
83
+ hints: 'warning',
84
+ assetFilter: (assetFilename) => {
85
+ return !/\.map$/.test(assetFilename);
86
+ }
87
+ }
88
+ };
89
+
90
+ // For Next.js - next.config.js
91
+ module.exports = {
92
+ experimental: {
93
+ bundlePagesExternals: true,
94
+ }
95
+ };
96
+ ```
97
+
98
+ ### CI Budget Check
99
+
100
+ ```yaml
101
+ # GitHub Actions
102
+ - name: Check bundle size
103
+ run: |
104
+ npm run build
105
+ BUNDLE_SIZE=$(du -sb build/static/js | cut -f1)
106
+ if [ $BUNDLE_SIZE -gt 250000 ]; then
107
+ echo "Bundle too large: $BUNDLE_SIZE bytes"
108
+ exit 1
109
+ fi
110
+ ```
111
+
112
+ ---
113
+
114
+ ## Common Issues & Fixes
115
+
116
+ ### 1. Large Dependencies
117
+
118
+ **Problem:** Single large library bloating bundle
119
+
120
+ ```bash
121
+ # Identify large packages
122
+ npx source-map-explorer build/static/js/main.*.js
123
+
124
+ # Common culprits:
125
+ # - moment.js (~300KB) → use date-fns (~20KB)
126
+ # - lodash (~70KB) → use lodash-es + tree shaking
127
+ # - charts (~200KB) → lazy load
128
+ ```
129
+
130
+ **Fix: Replace with lighter alternatives**
131
+
132
+ | Heavy | Light Alternative | Savings |
133
+ |-------|------------------|---------|
134
+ | moment | date-fns | ~280KB |
135
+ | lodash | lodash-es | ~50KB |
136
+ | axios | ky, fetch | ~15KB |
137
+ | uuid | nanoid | ~10KB |
138
+ | classnames | clsx | ~5KB |
139
+
140
+ ### 2. No Tree Shaking
141
+
142
+ **Problem:** Importing entire library
143
+
144
+ ```javascript
145
+ // BAD: Imports entire lodash
146
+ import _ from 'lodash';
147
+ _.map(arr, fn);
148
+
149
+ // GOOD: Import only what you need
150
+ import map from 'lodash/map';
151
+ map(arr, fn);
152
+
153
+ // BETTER: Use native
154
+ arr.map(fn);
155
+ ```
156
+
157
+ ### 3. Duplicate Dependencies
158
+
159
+ **Problem:** Same package multiple versions
160
+
161
+ ```bash
162
+ # Check for duplicates
163
+ npm ls lodash
164
+ npm dedupe
165
+ ```
166
+
167
+ ### 4. No Code Splitting
168
+
169
+ **Problem:** Single large bundle
170
+
171
+ ```javascript
172
+ // BAD: Import everything at once
173
+ import Dashboard from './Dashboard';
174
+ import Settings from './Settings';
175
+ import Analytics from './Analytics';
176
+
177
+ // GOOD: Dynamic imports
178
+ const Dashboard = React.lazy(() => import('./Dashboard'));
179
+ const Settings = React.lazy(() => import('./Settings'));
180
+ const Analytics = React.lazy(() => import('./Analytics'));
181
+ ```
182
+
183
+ ### 5. Including Dev Dependencies
184
+
185
+ **Problem:** Development code in production
186
+
187
+ ```javascript
188
+ // webpack.config.js
189
+ module.exports = {
190
+ mode: 'production',
191
+ optimization: {
192
+ usedExports: true, // Tree shaking
193
+ minimize: true,
194
+ }
195
+ };
196
+
197
+ // Remove console.log in production
198
+ plugins: [
199
+ new webpack.DefinePlugin({
200
+ 'process.env.NODE_ENV': JSON.stringify('production')
201
+ })
202
+ ]
203
+ ```
204
+
205
+ ---
206
+
207
+ ## Optimization Techniques
208
+
209
+ ### 1. Code Splitting
210
+
211
+ ```javascript
212
+ // Route-based splitting
213
+ import { lazy, Suspense } from 'react';
214
+
215
+ const Dashboard = lazy(() => import('./pages/Dashboard'));
216
+ const Settings = lazy(() => import('./pages/Settings'));
217
+
218
+ function App() {
219
+ return (
220
+ <Suspense fallback={<Loading />}>
221
+ <Routes>
222
+ <Route path="/dashboard" element={<Dashboard />} />
223
+ <Route path="/settings" element={<Settings />} />
224
+ </Routes>
225
+ </Suspense>
226
+ );
227
+ }
228
+ ```
229
+
230
+ ### 2. Dynamic Imports
231
+
232
+ ```javascript
233
+ // Load heavy library on demand
234
+ const loadChart = async () => {
235
+ const { Chart } = await import('chart.js');
236
+ return Chart;
237
+ };
238
+
239
+ // In component
240
+ useEffect(() => {
241
+ if (showChart) {
242
+ loadChart().then(Chart => {
243
+ // Use Chart
244
+ });
245
+ }
246
+ }, [showChart]);
247
+ ```
248
+
249
+ ### 3. Tree Shaking
250
+
251
+ ```javascript
252
+ // package.json - mark as side-effect free
253
+ {
254
+ "sideEffects": false
255
+ }
256
+
257
+ // Or specify files with side effects
258
+ {
259
+ "sideEffects": ["*.css", "*.scss"]
260
+ }
261
+ ```
262
+
263
+ ### 4. Compression
264
+
265
+ ```javascript
266
+ // webpack.config.js
267
+ const CompressionPlugin = require('compression-webpack-plugin');
268
+
269
+ plugins: [
270
+ new CompressionPlugin({
271
+ algorithm: 'gzip',
272
+ test: /\.(js|css|html|svg)$/,
273
+ threshold: 10240,
274
+ minRatio: 0.8,
275
+ })
276
+ ]
277
+ ```
278
+
279
+ ### 5. External CDN
280
+
281
+ ```javascript
282
+ // webpack.config.js
283
+ module.exports = {
284
+ externals: {
285
+ react: 'React',
286
+ 'react-dom': 'ReactDOM',
287
+ }
288
+ };
289
+
290
+ // Load from CDN in HTML
291
+ <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
292
+ ```
293
+
294
+ ---
295
+
296
+ ## Monitoring Bundle Size
297
+
298
+ ### Track Over Time
299
+
300
+ ```bash
301
+ # Generate size report
302
+ npx bundlesize
303
+
304
+ # Compare with previous build
305
+ npx bundlewatch
306
+ ```
307
+
308
+ ### Bundle Size Check Action
309
+
310
+ ```yaml
311
+ # .github/workflows/bundle.yml
312
+ name: Bundle Size
313
+
314
+ on: pull_request
315
+
316
+ jobs:
317
+ bundle:
318
+ runs-on: ubuntu-latest
319
+ steps:
320
+ - uses: actions/checkout@v3
321
+
322
+ - name: Build
323
+ run: npm ci && npm run build
324
+
325
+ - name: Analyze bundle
326
+ uses: preactjs/compressed-size-action@v2
327
+ with:
328
+ repo-token: "${{ secrets.GITHUB_TOKEN }}"
329
+ pattern: "./build/static/js/*.js"
330
+ ```
331
+
332
+ ---
333
+
334
+ ## Bundle Analysis Report
335
+
336
+ ```markdown
337
+ # Bundle Analysis Report
338
+
339
+ **Date:** [YYYY-MM-DD]
340
+ **Build:** [build-id]
341
+
342
+ ## Summary
343
+
344
+ | Metric | Before | After | Change |
345
+ |--------|--------|-------|--------|
346
+ | Total JS | 250KB | 180KB | -28% |
347
+ | Main chunk | 150KB | 100KB | -33% |
348
+ | Vendor chunk | 100KB | 80KB | -20% |
349
+ | CSS | 45KB | 40KB | -11% |
350
+
351
+ ## Largest Dependencies
352
+
353
+ | Package | Size | % of Bundle |
354
+ |---------|------|-------------|
355
+ | react-dom | 40KB | 22% |
356
+ | lodash | 25KB | 14% |
357
+ | axios | 15KB | 8% |
358
+
359
+ ## Recommendations
360
+
361
+ 1. [ ] Replace lodash with native methods
362
+ 2. [ ] Lazy load Chart component
363
+ 3. [ ] Enable gzip compression
364
+ 4. [ ] Add route-based code splitting
365
+ ```
366
+
367
+ ---
368
+
369
+ ## Commands
370
+
371
+ | Command | Description |
372
+ |---------|-------------|
373
+ | `pa:bundle-analyze` | Analyze bundle |
374
+ | `pa:bundle-report` | Generate report |
375
+ | `pa:bundle-optimize` | Optimization suggestions |