Posts Learn Components Snippets Categories Tags About
/

Laravel Mix Assets Cache Busting

Learn how to implement Laravel mix assets cache busting for your production environment to inalidate old caches.

Created on Aug 10, 2021

11 views

To enable Laravel assets cache busting for production you can set call the "version()" method from within your "webpack.mix.js". By making use of cache-busting your assets can be cached indefinitely and only when you deploy new changes to your assets, the new one will take effect. How this work behind the scene is that Laravel compiles the assets with a timestamp and unique token to force the browser to load fresh assets instead of serving the copies of the old code.

Define Version Method
To define the version method only on production you can make use of the "inProduction()" check.
# webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');

if (mix.inProduction()) {
    mix.version();
}

Run Production Command
Once you have defined the "versions()" method like above, that you need to run the "prod" command.
npm run prod

# or if you are using yarn
yarn prod

Use mix() on Laravel Blade
Then specify the assets on the blade file by calling the "mix()" function.
# for styling
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

# for javascript
<script src="{{ mix('/js/app.js') }}"></script>

Full code example for the blade file available below.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="{{ mix('js/determine-theme.js') }}" defer></script>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">

</head>
<body>
    <!-- your other codes here -->

    <script src="{{ mix('js/app.js') }}" defer></script>
</body>
</html>

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

Load comments for Laravel Mix Assets Cache Busting

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More