Skip to content

03 Cache Busting

Jump to bottom
Rumen Damyanov edited this page Jul 29, 2025 · 1 revision

Cache Busting

This example shows how to implement cache busting to ensure browsers load updated assets.

What is Cache Busting?

Cache busting prevents browsers from using cached versions of assets when files have been updated. This ensures users always get the latest version of your CSS and JavaScript files.

Setting Up Cache Busting

Using a Cache Manifest File

Create a JSON file containing asset hashes:

{
    "css/app.css": "529e54acf891ccc6592f115afa1cc077",
    "js/app.js": "a8b2c3d4e5f6789012345678901234567890",
    "css/bootstrap.min.css": "1a2b3c4d5e6f7890123456789abcdef0"
}

Configure Cache Buster

<?php

use Rumenx\Assets\Asset;

// Set the cache buster file path
Asset::setCachebuster('/path/to/public/build/assets.json');

// Add your assets normally
Asset::add('css/app.css');
Asset::add('js/app.js');
Asset::add('css/bootstrap.min.css');

// Output with cache busting
echo Asset::css();
echo Asset::js();

Expected Output

<link rel="stylesheet" href="css/app.css?529e54acf891ccc6592f115afa1cc077" />
<link rel="stylesheet" href="css/bootstrap.min.css?1a2b3c4d5e6f7890123456789abcdef0" />

<script src="js/app.js?a8b2c3d4e5f6789012345678901234567890"></script>

Generating Cache Manifest

Using Laravel Mix

If you're using Laravel Mix, you can generate the manifest automatically:

// webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .version(); // This generates the manifest

// The manifest will be created at public/mix-manifest.json

Custom Build Script

Create a simple PHP script to generate hashes:

<?php

$assets = [
    'css/app.css' => 'public/css/app.css',
    'js/app.js' => 'public/js/app.js',
    'css/bootstrap.min.css' => 'public/css/bootstrap.min.css',
];

$manifest = [];

foreach ($assets as $key => $file) {
    if (file_exists($file)) {
        $manifest[$key] = md5_file($file);
    }
}

file_put_contents('public/build/assets.json', json_encode($manifest, JSON_PRETTY_PRINT));

echo "Cache manifest generated successfully!\n";

Production Example

<?php

use Rumenx\Assets\Asset;

// Only enable cache busting in production
if (getenv('APP_ENV') === 'production') {
    Asset::setCachebuster(__DIR__ . '/public/build/assets.json');
}

// Add assets
Asset::add('css/normalize.css');
Asset::add('css/app.css');
Asset::add('js/vendor.js');
Asset::add('js/app.js');

?>
<!DOCTYPE html>
<html>
<head>
    <title>Production App</title>
    <?= Asset::css() ?>
</head>
<body>
    <h1>My Production Application</h1>

    <?= Asset::js() ?>
</body>
</html>

Fallback Behavior

If the cache manifest file doesn't exist or an asset isn't found in the manifest, the package will:

  1. Try to generate a hash using the file's modification time
  2. Fall back to serving the asset without a cache buster
  3. Continue working without breaking your application

Best Practices

  1. Generate manifest during build: Include cache manifest generation in your deployment process
  2. Use with CDN: Cache busting works great with CDN configurations
  3. Environment-specific: Only enable in production to avoid development overhead
  4. Automate updates: Update the manifest whenever assets change

Related Examples

Clone this wiki locally