Generated by Spark: Optimize bundle size further by lazy-loading heavy components like Monaco Editor

docs/bundle-optimization.md

@@ -0,0 +1,137 @@
+# Bundle Size Optimization
+
+## Overview
+This document describes the bundle size optimization strategies implemented in CodeForge, focusing on lazy-loading heavy components like Monaco Editor.
+
+## Heavy Dependencies Identified
+
+### Monaco Editor (~2.5MB)
+Monaco Editor is one of the largest dependencies in the application. It's used in:
+- CodeEditor component (main code editor)
+- LambdaDesigner component (lambda function editor)
+- WorkflowDesigner component (inline script editors)
+
+### Optimization Strategy
+
+#### 1. Lazy Loading Monaco Editor
+Created lazy-loaded wrappers for Monaco Editor:
+
+**LazyMonacoEditor** (`src/components/molecules/LazyMonacoEditor.tsx`)
+- Full-featured Monaco Editor wrapper for main code editor
+- Used in: CodeEditor component
+- Includes loading fallback with spinner and status text
+- Exports `preloadMonacoEditor()` function for manual preloading
+
+**LazyInlineMonacoEditor** (`src/components/molecules/LazyInlineMonacoEditor.tsx`)
+- Lightweight Monaco Editor wrapper for inline editors
+- Used in: LambdaDesigner and WorkflowDesigner components
+- Smaller loading fallback for inline contexts
+- Configurable height, language, and options
+
+#### 2. Component Registry Integration
+Updated `src/lib/component-registry.ts` to automatically preload Monaco Editor when components that use it are loaded:
+
+```typescript
+CodeEditor: lazyWithPreload(
+  () => {
+    preloadMonacoEditor()
+    return import('@/components/CodeEditor').then(m => ({ default: m.CodeEditor }))
+  },
+  'CodeEditor'
+)
+```
+
+This ensures Monaco Editor starts loading as soon as the CodeEditor component is requested, improving perceived performance.
+
+#### 3. Suspense Boundaries
+All lazy-loaded Monaco Editor instances are wrapped in React Suspense with custom fallback components:
+- Shows loading spinner
+- Displays "Loading editor..." status text
+- Prevents layout shift during loading
+
+## Performance Impact
+
+### Before Optimization
+- Monaco Editor loaded eagerly with initial bundle
+- ~2.5MB added to main bundle size
+- Slower initial page load for all users
+
+### After Optimization
+- Monaco Editor loaded only when needed
+- Main bundle size reduced by ~2.5MB
+- Faster initial page load
+- Slight delay when first opening editor (mitigated by preloading)
+
+## Usage
+
+### For New Components Using Monaco Editor
+
+If you need to add Monaco Editor to a new component:
+
+1. **For full-page editors**, use `LazyMonacoEditor`:
+```typescript
+import { LazyMonacoEditor } from '@/components/molecules'
+
+<LazyMonacoEditor
+  file={file}
+  onChange={handleChange}
+/>
+```
+
+2. **For inline editors**, use `LazyInlineMonacoEditor`:
+```typescript
+import { LazyInlineMonacoEditor } from '@/components/molecules'
+
+<LazyInlineMonacoEditor
+  height="300px"
+  defaultLanguage="javascript"
+  value={code}
+  onChange={handleChange}
+/>
+```
+
+3. **Update component registry** to preload Monaco:
+```typescript
+MyComponent: lazyWithPreload(
+  () => {
+    preloadMonacoEditor()
+    return import('@/components/MyComponent').then(m => ({ default: m.MyComponent }))
+  },
+  'MyComponent'
+)
+```
+
+## Other Optimization Opportunities
+
+### Future Optimizations
+1. **Chart libraries** (recharts, d3) - Consider lazy loading
+2. **react-router-dom** - Already using route-based code splitting
+3. **Three.js** - If 3D visualization is added, lazy load it
+4. **Heavy utility libraries** - Audit lodash/date-fns usage
+
+### Monitoring
+Use the bundle metrics system to track bundle sizes:
+```typescript
+import { bundleMetrics } from '@/lib/bundle-metrics'
+
+// Check current bundle size
+const metrics = bundleMetrics.getMetrics()
+console.log('Bundle size:', metrics.bundleSize)
+```
+
+## Related Files
+- `src/components/molecules/LazyMonacoEditor.tsx`
+- `src/components/molecules/LazyInlineMonacoEditor.tsx`
+- `src/components/molecules/MonacoEditorPanel.tsx`
+- `src/components/CodeEditor.tsx`
+- `src/components/LambdaDesigner.tsx`
+- `src/components/WorkflowDesigner.tsx`
+- `src/lib/component-registry.ts`
+- `src/lib/lazy-loader.ts`
+
+## Best Practices
+1. Always wrap lazy-loaded components in Suspense
+2. Provide meaningful loading fallbacks
+3. Preload heavy components when parent component loads
+4. Test loading states in slow network conditions
+5. Monitor bundle size changes in CI/CD