Laravel 资产防止浏览器缓存

在 Web 开发中，浏览器缓存是非常重要的。通过缓存静态资源，如样式表、JavaScript 文件和图片等，可以减少页面加载时间，提高用户体验。

但有时候，我们需要在版本更新后让客户端重新拉取最新的资源，这时候就需要防止浏览器缓存。

在 Laravel 应用中，可以通过以下方法来实现。

第一步：版本号

在资源文件的名称中添加版本号，例如：

<link href="{{ asset('css/styles.css?v=1.3') }}" rel="stylesheet">
<script src="{{ asset('js/scripts.js?v=1.2') }}"></script>

每当资源文件更新时，修改对应的版本号即可。

第二步：使用 Laravel Mix

Laravel Mix 是 Laravel 自带的构建工具，可以帮助我们更好地管理前端资源。

使用 Laravel Mix 可以生成简洁的 URL 和自动添加版本号的资源链接。在 Blade 模板中，可以这样使用：

<link href="{{ mix('css/styles.css') }}" rel="stylesheet">
<script src="{{ mix('js/scripts.js') }}"></script>

在 Laravel Mix 的配置文件中，我们可以指定资源输出路径，并自动添加版本号：

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

生成的资源链接默认会使用 public/mix-manifest.json 文件中的版本号。

第三步：设置 HTTP 响应头

除了在资源链接中添加版本号，还可以在 HTTP 响应头中添加 Cache-Control 或 Expires，来控制浏览器缓存。

在 Laravel 应用中，可以使用 header 函数来设置响应头：

return response()
    ->view('welcome')
    ->header('Cache-Control', 'no-cache, no-store, must-revalidate')
    ->header('Expires', '0');

以上代码将在响应头中设置 Cache-Control: no-cache, no-store, must-revalidate 和 Expires: 0，告诉浏览器不要缓存该响应。

总结

在 Laravel 应用中，我们可以通过添加版本号、使用 Laravel Mix 和设置 HTTP 响应头来防止浏览器缓存，并确保客户端能够获取最新的资源。

以上方法可以根据实际情况灵活应用，常常用于前端框架的静态资源的部署和管理。