📦

Asset Management Demo

Modern asset bundling, minification, and cache management

CSS Bundling JS Minification Cache Busting Performance

Asset Management Features

CSS/JS Bundling

Combine multiple files into single bundles for improved performance.

Minification

Reduce file sizes by removing whitespace and comments.

Cache Busting

Automatic versioning for updated assets and improved caching.

Asset Manager

Centralized asset management with dependency handling.

Back to Demo Index

<?php
// AssetManager - CSS/JS Bundling
public function addCSS(string $file, int $priority = 50): void
{
    $this->cssFiles[] = [
        'file' => $file,
        'priority' => $priority,
        'path' => $this->getAssetPath($file, 'css')
    ];
}

public function renderCSS(): string
{
    $output = '';
    
    // Sort by priority
    usort($this->cssFiles, fn($a, $b) => $a['priority'] - $b['priority']);
    
    if ($this->minifyEnabled && !empty($this->cssFiles)) {
        // Create bundled file
        $bundleHash = $this->createCSSBundle();
        $output .= "<link rel=\"stylesheet\" href=\"/cache/assets/{$bundleHash}.css\">\n";
    } else {
        // Individual files
        foreach ($this->cssFiles as $css) {
            $output .= "<link rel=\"stylesheet\" href=\"{$css['path']}\">\n";
        }
    }
    
    return $output;
}

private function minifyCSS(string $css): string
{
    // Remove comments
    $css = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css);
    
    // Remove unnecessary whitespace
    $css = preg_replace('/\s+/', ' ', $css);
    
    // Remove space around specific characters
    $css = preg_replace('/\s*([{}:;,>+~])\s*/', '$1', $css);
    
    return trim($css);
}

private function minifyJS(string $js): string
{
    // Remove single-line comments
    $js = preg_replace('/(?<![:\'"\/])\/\/.*$/m', '', $js);
    
    // Remove multi-line comments
    $js = preg_replace('/\/\*[\s\S]*?\*\//', '', $js);
    
    // Remove unnecessary whitespace
    $js = preg_replace('/\s+/', ' ', $js);
    
    return trim($js);
}

public function getFileVersion(string $filePath): string
{
    if (file_exists($filePath)) {
        return (string) filemtime($filePath);
    }
    return time();
}

public function versionedAsset(string $assetPath): string
{
    $publicPath = 'public' . $assetPath;
    
    if (file_exists($publicPath)) {
        $version = $this->getFileVersion($publicPath);
        return $assetPath . '?v=' . $version;
    }
    
    return $assetPath;
}

// Output: /assets/css/app.css?v=1640995200

<?php
// In your view template
$this->assets()->addCSS('demo.css');
$this->assets()->addCSS('buttons.css');
$this->assets()->addJS('demo.js');
$this->assets()->addJS('utils.js');

// Add inline styles
$this->assets()->addInlineCSS('
    .custom-component {
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        padding: 1rem;
        border-radius: 8px;
    }
');

// Add inline scripts
$this->assets()->addInlineJS('
    console.log("Page loaded");
    document.addEventListener("DOMContentLoaded", function() {
        console.log("DOM ready");
    });
');
?>

<!-- In your layout template -->
<head>
    <?= $this->assets()->renderCSS() ?>
</head>
<body>
    <!-- content -->
    <?= $this->assets()->renderJS() ?>
</body>

Asset Management Demo

Asset Management Features

CSS/JS Bundling

Minification

Cache Busting

Asset Manager

CSS/JS Bundling Implementation

Asset Minification System

Cache Busting Implementation

Asset Manager Usage