@listenrightmeeow/newk-plugin-mppo

Multi-Phase Progressive Optimization (MPPO) plugin for NEWK - achieving 40-60% bundle size reduction through intelligent code elimination.

Features

• 🚀 10 Optimization Phases: BAP, TAP, BOP, DGP, DOP, EHP, BRP, DCE, ZRSA, ZULU
• 📉 40-60% Bundle Reduction: Real-world results on production applications
• 🔍 Zero-Risk Safety Assurance: Browser-based validation ensures no functionality breaks
• ⚡ Rollup-Powered: Fast, efficient bundling with modern optimization techniques
• 🎯 Framework Agnostic: Works with React, Vue, Angular, and vanilla JavaScript
• 🏗️ Event-Driven DDD Architecture: Enterprise-grade design with CQRS patterns

Installation

npm install @listenrightmeeow/newk-plugin-mppo

Or install with the CLI:

npm install -g @listenrightmeeow/newk-cli
newk setup plugins

Usage

CLI Usage

# Run optimization with MPPO
newk optimize --plugins bundle-optimization

# Skip specific phases
newk optimize --skip-phases ZRSA

# Custom configuration
newk optimize --config .newkrc.production.json

Programmatic Usage

import { MPPOPlugin } from '@listenrightmeeow/newk-plugin-mppo';
import { EventBus } from '@listenrightmeeow/newk-core';

// Initialize plugin
const mppo = new MPPOPlugin({
  projectPath: process.cwd(),
  outputPath: 'dist/optimized',
  skipPhases: [] // Run all phases
});

// Set up event listeners
const eventBus = EventBus.getInstance();

eventBus.on('mppo.phase.completed', (event) => {
  console.log(`Phase ${event.phase} completed:`);
  console.log(`  Duration: ${event.duration}ms`);
  console.log(`  Reduction: ${event.metrics.reduction}%`);
});

// Run optimization
const result = await mppo.optimize({
  projectPath: process.cwd(),
  stagingPath: '.newk/staging',
  validateInBrowser: true
});

console.log('Optimization complete!');
console.log(`Total reduction: ${result.metrics.bundleReduction}%`);
console.log(`Original size: ${result.metrics.originalSize}`);
console.log(`Optimized size: ${result.metrics.optimizedSize}`);

Configuration

Add to your .newkrc.json:

{
  "plugins": {
    "mppo": {
      "enabled": true,
      "phases": {
        "BAP": { "enabled": true },
        "TAP": { "enabled": true },
        "BOP": { "enabled": true },
        "DGP": { "enabled": true },
        "DOP": { "enabled": true },
        "EHP": { "enabled": true },
        "BRP": { "enabled": true },
        "DCE": { "enabled": true },
        "ZRSA": {
          "enabled": true,
          "browser": {
            "headless": true,
            "timeout": 30000
          }
        },
        "ZULU": { "enabled": true }
      },
      "rollup": {
        "treeshake": true,
        "minify": true,
        "sourcemap": false
      },
      "validation": {
        "browser": true,
        "timeout": 30000,
        "retries": 3
      }
    }
  }
}

Optimization Phases

1. BAP (Build Analysis Phase)

Analyzes project structure, identifies entry points, and detects build tool configuration.

2. TAP (Tree Analysis Phase)

Performs deep AST analysis to understand code structure and identify optimization opportunities.

3. BOP (Build Optimization Phase)

Optimizes build configuration for maximum tree-shaking and dead code elimination.

4. DGP (Dependency Graph Phase)

Constructs comprehensive dependency graph to understand module relationships.

5. DOP (Dead-code Optimization Phase)

Identifies unused code paths, unreachable functions, and dead exports.

6. EHP (Execution Hot Path)

Analyzes runtime execution patterns to preserve critical code paths.

7. BRP (Bundle Reduction Phase)

Classifies and reduces bundles through intelligent code splitting.

8. DCE (Dead Code Elimination)

Removes identified dead code while preserving functionality.

9. ZRSA (Zero-Risk Safety Assurance)

Validates optimized bundles in real browser environment.

10. ZULU (Final Processing)

Applies final compression and generates production bundles.

Event System

MPPO emits detailed events throughout the optimization process:

// Phase lifecycle events
eventBus.on('mppo.phase.started', (event) => {
  console.log(`Starting ${event.phase}`);
});

eventBus.on('mppo.phase.completed', (event) => {
  console.log(`Completed ${event.phase}: ${event.metrics.reduction}% reduction`);
});

// Optimization events
eventBus.on('mppo.optimization.started', (event) => {
  console.log(`Optimization started: ${event.sessionId}`);
});

eventBus.on('mppo.optimization.completed', (event) => {
  console.log(`Final metrics:`, event.metrics);
});

// Validation events
eventBus.on('mppo.validation.started', (event) => {
  console.log('Starting browser validation...');
});

eventBus.on('mppo.validation.completed', (event) => {
  console.log(`Validation ${event.success ? 'passed' : 'failed'}`);
});

Performance Results

Real-world optimization results:

| Project Type | Original | Optimized | Reduction | Time | |-------------|----------|-----------|-----------|------| | React SPA | 1.2 MB | 540 KB | 55% | 45s | | Vue.js App | 890 KB | 445 KB | 50% | 38s | | Next.js | 1.5 MB | 750 KB | 50% | 52s | | Angular | 1.8 MB | 900 KB | 50% | 58s | | Vanilla JS | 509 KB | 250 KB | 50.9% | 25s |

Advanced Usage

Custom Phase Configuration

const mppo = new MPPOPlugin({
  projectPath: process.cwd(),
  phases: {
    TAP: {
      maxDepth: 10,
      analyzeComments: true
    },
    BRP: {
      chunkSizeLimit: 100000,
      vendorSplit: true
    },
    ZRSA: {
      browser: {
        headless: false, // Show browser for debugging
        devtools: true
      }
    }
  }
});

Skipping Phases

const mppo = new MPPOPlugin({
  skipPhases: ['ZRSA'], // Skip browser validation
  projectPath: process.cwd()
});

Custom Event Handlers

class CustomHandler {
  handlePhaseCompleted(event) {
    // Custom logic for phase completion
    if (event.phase === 'DCE' && event.metrics.reduction < 30) {
      console.warn('Low reduction achieved, consider reviewing configuration');
    }
  }
}

const handler = new CustomHandler();
eventBus.on('mppo.phase.completed', handler.handlePhaseCompleted.bind(handler));

Troubleshooting

Browser Validation Fails

If ZRSA phase fails:

# Skip browser validation temporarily
newk optimize --skip-phases ZRSA

# Or increase timeout
newk optimize --validation-timeout 60000

Low Reduction Rates

Check your configuration:

// Enable aggressive optimization
{
  "plugins": {
    "mppo": {
      "rollup": {
        "treeshake": {
          "moduleSideEffects": false,
          "propertyReadSideEffects": false
        }
      }
    }
  }
}

Memory Issues

For large projects:

# Increase Node.js memory limit
NODE_OPTIONS="--max-old-space-size=8192" newk optimize

Development

# Clone the repository
git clone https://github.com/listenrightmeow/newk.git
cd newk/packages/newk-plugin-mppo

# Install dependencies
npm install

# Build
npm run build

# Test
npm test

# Link for local development
npm link

License

BSD-3-Clause © Mike Dyer

Links

• GitHub Repository
• NPM Package
• Documentation