Performance & Bundle Optimization #49

Overview

Optimize the simplified CodeMirror implementation for production readiness, focusing on bundle size, performance, and memory efficiency after the always-editing architecture changes.

Scope

Production readiness optimization for simplified architecture:

• Bundle size analysis and optimization (tree-shake unused CodeMirror features)
• Performance testing (< 50ms update requirement with debounced events)
• Memory leak prevention and lifecycle testing
• Measure impact of MockTextElement removal (~300+ lines eliminated)

Technical Specifications

CodeMirror Bundle Analysis

Packages to Optimize:

• @codemirror/view (~40KB) - Core editor view
• @codemirror/state (~20KB) - State management
• @codemirror/lang-markdown (~10KB) - Markdown language support (conditional)
• Target Total: < 200KB addition to bundle

Tree Shaking Targets:

// Import only what we need for simplified architecture
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { markdown } from '@codemirror/lang-markdown';

// Avoid importing entire packages:
// ❌ import * as codemirror from '@codemirror/view'  
// ✅ import { EditorView } from '@codemirror/view'

Unused Features to Exclude:

• Autocompletion system (not needed for simple editing)
• Search/replace functionality (not in scope)
• Multiple selection (not needed yet)
• Collaborative editing (future feature)
• Complex themes (use minimal custom theme only)

Performance Benchmarks (Simplified Architecture)

Response Time Requirements:

• Keystroke to visual update: < 50ms (with CodeMirror native debouncing)
• Editor initialization: < 100ms (single editor type, no mode switching)
• Node type switching: N/A (always-editing eliminates mode changes)
• Large document (1000+ chars): < 100ms render

Memory Requirements:

• Stable usage: No memory leaks during long editing sessions
• Editor lifecycle: Proper cleanup on component unmount
• Multiple editors: Linear memory scaling (no O(n²) issues)
• Simplified state: Reduced memory from eliminating focused/unfocused states

Performance Impact Measurement

Before (Complex Architecture):

• MockTextElement system: ~300+ lines of positioning code
• Focused/unfocused states: Complex state management
• Manual debouncing: Multiple setTimeout instances
• Edit/display mode switching: Dual rendering paths

After (Simplified Architecture):

• Native CodeMirror positioning: Zero custom positioning code
• Always-editing mode: Simplified state management
• Native debouncing: Zero manual timers
• Single editor mode: One rendering path

Implementation Tasks

• Analyze current bundle size with simplified CodeMirror integration
• Implement tree shaking verification for minimal imports
• Create performance benchmark tests (< 50ms response with debouncing)
• Test memory usage during long editing sessions
• Profile editor initialization time (< 100ms target)
• Measure performance improvement from MockTextElement removal
• Document final bundle size impact vs target (< 200KB)
• Compare performance: simplified vs original complex architecture
• Create performance regression test suite

Bundle Optimization Strategy

Minimal Import Strategy

// Minimal CodeMirror setup for simplified architecture
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { markdown } from '@codemirror/lang-markdown';

// Minimal theme for NodeSpace (not full theme package)
const nodeSpaceTheme = EditorView.theme({
  // Only essential styling for always-editing mode
});

Conditional Loading

// Load features only when needed
const createExtensions = (multiline, markdownEnabled, editable) => {
  return [
    // Always loaded: basic editing
    basicKeymap,
    nodeSpaceTheme,
    debouncedUpdateListener,
    
    // Conditional: only load when needed
    ...(markdownEnabled ? [markdown()] : []),
    ...(multiline ? [] : [singleLineMode]),
    ...(\!editable ? [EditorState.readOnly.of(true)] : [])
  ];
};

Acceptance Criteria

• Bundle size increase under 200KB (measured and documented)
• Performance benchmarks all pass (< 50ms debounced response)
• Memory usage remains stable during 30+ minute editing sessions
• No memory leaks detected in editor lifecycle testing
• Editor initialization time under 100ms
• Smooth performance with large documents (1000+ characters)
• Tree shaking eliminates unused CodeMirror features
• Performance improvement documented vs complex architecture
• Performance regression testing suite created

Definition of Done

• All performance benchmarks meet requirements
• Bundle size optimized and within 200KB target
• Memory leak testing completed with no issues
• Performance regression testing passes
• Tree shaking verified and documented
• Performance improvement from simplification documented
• Production-ready performance achieved
• Ready for Issue Architectural Documentation - Hybrid Markdown Decisions #50 (architectural documentation)

Dependencies

• Hybrid Markdown Rendering #47 must be completed (need full implementation to measure performance)

Related Issues

• Hybrid Markdown Rendering System - Live Preview with Syntax Visibility #26 (parent issue)
• CodeMirror Foundation Setup #46 (CodeMirror foundation)
• Hybrid Markdown Rendering #47 (Hybrid markdown rendering)
• Architectural Documentation - Hybrid Markdown Decisions #50 (next - architectural documentation)