How to clear the cache of laravel static files (detailed method)

When developing a website or application using Laravel, static files are often used to improve the performance and user experience of the website. These static files typically include CSS, JavaScript, images, fonts, and more. However, during the development process, we often encounter situations where the browser still uses the original cached file after modifying the static file, causing problems on the website. So, in this article, we will talk about cache clearing methods for Laravel static files so that you can see the effect immediately after modifying the static files.

Principle

First, let’s look at how browsers cache static files. The browser creates an identifier (ETag) for the static file request and then saves this identifier to the cache along with the static file. Each time the browser requests the same file again, it sends the server an identifier for the file and uses that identifier to validate the cache. If the identifiers match, the browser will pull the file from cache.

Although browser caching is done locally on the user's computer, in a Laravel application we can interfere with browser caching by changing the URL of static files or adding other query parameters. This means that every time a static file is modified, we can change its URL or add query parameters to ensure that the browser gets the new file instead of using the cached old file.

Next, we will see how to achieve this goal.

Laravel static file cache clearing method

Method 1: Manually change the URL or add query parameters

Manually changing the URL of the static file or adding query parameters is a simple cache Cleanup method. For example, when referencing a CSS file, we can change its URL to:

<link rel="stylesheet" href="style.css?v=1">

This will tell the browser to add ?v=1 as a query parameter when requesting the file. If we want to update the file we can change the query parameter to ?v=2 or any other value. Every time a file is modified, the URL needs to be updated or new query parameters added.

Although this method is relatively simple, it requires manually updating the URL of each file or adding query parameters, which is very time-consuming and laborious.

Method 2: Use Mix and version control

Laravel Mix is ​​a front-end build tool for Laravel, which allows you to use many popular front-end tools to compile, compress and package CSS, JavaScript, images and font files. Mix can help you automatically generate static file URLs and change the version number on every build to ensure the browser gets the latest files.

To use Mix, we need to install Laravel Mix first:

npm install laravel-mix --save-dev

Then, define static files and versions in the webpack.mix.js file:

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

Runnpm run dev or npm run prod can generate a file with a version number. For example, if we compile the app.css file, it will generate the app.css?id=48d24b file, where 48d24b is the hash of the file. Every time a file is modified, Laravel Mix will generate a new version with a new hash value.

To use Mix-generated static file URLs in HTML files, you can use the following code:

<link rel="stylesheet" href="{{ mix(&#39;css/app.css&#39;) }}">

This will automatically convert the filename to a filename with a version number. For example, if we run npm run prod, the above code will generate the following results:

<link rel="stylesheet" href="/css/app.css?id=48d24b">

By using Laravel Mix, we don’t need to manually change the URL of the file or add query parameters. Laravel Mix will automatically generate a new version number for us and change the URL of the static files.

Method 3: Use cache clearing middleware

Laravel cache clearing middleware allows us to clear the browser cache on every request. To use the cache busting middleware, we can create the following code in app/Http/Middleware/CacheControl.php:

<?php

namespace App\Http\Middleware;

use Closure;

class CacheControl
{
    public function handle($request, Closure $next)
    {
        $response = $next($request);

        $response->header('Cache-Control', 'nocache, no-store, max-age=0, must-revalidate');
        $response->header('Pragma', 'no-cache');
        $response->header('Expires', 'Fri, 01 Jan 1990 00:00:00 GMT');

        return $response;
    }
}

Then, in app/Http/Kernel.php Register middleware in:

protected $middleware = [
    // ...
    \App\Http\Middleware\CacheControl::class,
];

Now, every time the browser requests a static file, it will send a new request to the server instead of using cache, ensuring that we always get the latest file.

Summary

By manually changing the URL of static files or adding query parameters, using Laravel Mix or using cache clearing middleware, we can effectively clear cache files in Laravel applications and ensure Users always see the latest content.

Try different methods and choose the one that best suits your needs for managing cache clearing of static files. No matter which method you use, you should always be aware of the impact of caching to ensure that your website maintains good performance and user experience.

The above is the detailed content of How to clear the cache of laravel static files (detailed method). For more information, please follow other related articles on the PHP Chinese website!