Laravel Example

Laravel Cache Buster

Cache Buster is the technique used to a preceded random string before every includes such as CSS and JS. The benefit of this technique is to prevent the browser to load CSS and JS from caching.

Also, it's helpful to prevent proxies to use your assets. The technique also knows as cache busting. All advert tags must have cache buster.

Two types of formats that code busting dynamic string uses. 

  • Timestamps
  • Random number with a string.

You can use functions like md5 but it's not too much safe like anyone can decode md5. Here is the simple example how it looks like:

# Normal CSS file includes
<link href="css/build/build.css" rel="stylesheet" type="text/css" />
# With Cache Busting CSS includes 
<link href="/96c8a2176fd1f379e91e512e1418b94e/css/build/build.css" rel="stylesheet" type="text/css" />

String or code dynamic is complicated to assume and use it. It means it's safe no one can use your assets right !!. 

In this article, I will show you how you can use cache busting in Laravel. Here I will use third party package you can check it here:

 To use this package in Laravel 5.3 you have to install it this command help you to do that:

#terminal or command window
composer require "spekkionu/assetcachebuster": "2.*"

run this command in Laravel Project root folder or if you want to manually add a dependency in your composer.json file:

# composer.json
    "require": {
        "spekkionu/assetcachebuster": "2.*"

After adding a dependency in a composer.json file you can use this command:

composer update

After installation, we have to register package with Laravel to do that open app.php file in your application and add Service Provider into providers array

Spekkionu\Assetcachebuster\AssetcachebusterServiceProvider::class, // Here it is

and add a facade to aliases array:

'Asset' => Spekkionu\Assetcachebuster\Facades\Cachebuster::class

If you facing any error while installing please comment or visit package at GitHub. This time is to public config file from the vendor using a command:

#terminal or command window
php artisan vendor:publish --provider="Spekkionu\Assetcachebuster\AssetcachebusterServiceProvider" --tag=config

I created dummy CSS and JS file and put it into public/css/app.css and public/js/app.js. Now If I open my source then you can see it how I included it and  how it will look like in browser

Reference 1

Cache buster In Laravel Step 1

Reference 2

Cache buster In Laravel Step 2

Now need to add some rules in your .htaccess file and that will allow the server to access your asset. Here is the .htaccess sample which I am using throughout this tutorial.

Cache buster In Laravel Step 3

Now Laravel allows you to use Cache busting in your project you just need to user Asset::url function when you include JS or CSS file.

Cache buster In Laravel Step 4

when you open output that will same but when you open source of the page by press ctrl + u in a Google Chrome web browser you will see magic like this.

Cache buster In Laravel Step 5

You can see a string that is "96c8a2176fd1f379e91e512e1418b94e" preceded the string is the cache busting string added by Laravel runtime. Now you can notice one file into config directory that "assetcachebuster.php" if you open that file you can see same string into hash. If you want to change this you can use a command in your terminal or command that is:

php artisan assetcachebuster:generate


Tutorial By Gautam Patadiya