Loading test suite...
+โซ Image is monochrome
' : ''} ++ This demo uses real S5.js code with real MediaProcessor functionality. + All image processing, WASM initialization, and metadata extraction are fully functional. + Only the bundle loading animation is simulated for demonstration purposes (the bundles are pre-loaded in this HTML page). + In a production environment with proper bundler configuration (Webpack, Rollup, Vite), + the code-splitting would happen automatically at build time. +
+| Import Strategy | +Size (Uncompressed) | +Size (Gzipped) | +Savings | +
|---|---|---|---|
| Full Bundle (all features) | +~273 KB | +~70 KB | +- | +
| Core Only (no media) | +~195 KB | +~51 KB | +-27% size | +
| Media Only (lazy loaded) | +~79 KB | +~19 KB | +-73% initial | +
+ The actual MediaProcessor API is already available. Test it with an image: +
+ + +
+// Regular import (loads everything)
+import { S5, MediaProcessor } from 's5.js';
+
+// Code-split imports (recommended)
+import { S5 } from 's5.js/core';
+
+// Lazy load media when needed
+const loadMedia = async () => {
+ const { MediaProcessor } = await import('s5.js/media');
+ return MediaProcessor;
+};
+
+// Usage
+button.onclick = async () => {
+ const MediaProcessor = await loadMedia();
+ await MediaProcessor.initialize();
+ // Now ready for image processing
+};
+ + Imports only the core S5.js functionality without media processing features. +
++ Dynamically imports media processing features only when needed. +
+| Import Strategy | +Size (Uncompressed) | +Size (Gzipped) | +Savings | +
|---|---|---|---|
| Full Bundle (all features) | +~273 KB | +~70 KB | +- | +
| Core Only (no media) | +~195 KB | +~51 KB | +-27% size | +
| Media Only (lazy loaded) | +~79 KB | +~19 KB | +-73% initial | +
+ After loading the media bundle, select an image to extract metadata. +
+Image: ${metadata.width}x${metadata.height} ${metadata.format}
+Monochrome: ${metadata.isMonochrome ? 'Yes' : 'No'}
+Processing: ${metadata.processingTime}ms via ${metadata.source}
+Enhanced S5.js - Advanced Media Processing
+Starts blurred, gradually sharpens. Best for photos.
+Reveals top-to-bottom. Classic progressive JPEG.
+Alternating lines for fast preview. PNG/GIF style.
+