ThinkPHP6.0解决js、css缓存问题

简介: ThinkPHP6.0解决js、css缓存问题

1、原来的写法

<link href="/static/css/m.min.css" rel="stylesheet">

2、改进后的写法

在配置文件中增加一个配置,如果需要更新就修改版本号

<link href="/static/css/m.min.css?t={{version.app_version}}" rel="stylesheet">
例如
<link href="/static/css/m.min.css?t=1623291687929" rel="stylesheet">

改进处理可以使用文件的md5值作为版本号,只要发生修改就会更新版本号

关于版本号的处理

1、每次部署的时候自动生成一个版本号文件

echo $(date "+%Y%m%d%H%M%S") > version.txt

2、配置文件中读取版本号

config/version.php

<?php
// +----------------------------------------------------------------------
// | 应用版本号设置
// +----------------------------------------------------------------------
// 生成version
// echo $(date "+%Y%m%d%H%M%S") > version.txt
$version_file = '../version.txt';
if(file_exists($version_file)){
    $version = trim(file_get_contents($version_file));
} else{
    $version = time() . '';
}
return [
    // 应用版本号,用于更新静态文件
    'app_version'         => $version,
];

3、每次渲染模板的时候在中间件中读取该配置

<?php
declare (strict_types=1);
namespace app\index\middleware;
use \Think\response\View as ViewResponse;
class CommonDataMiddleware
{
    public function handle($request, \Closure $next)
    {
        $response = $next($request);
        if ($response instanceOf ViewResponse) {
           if (!$response->getVars('version')) {
              $response->assign('version', config('version'));
           }
        }
        return $response;
    }
}

4、模板文件中使用

<link href="/static/css/m.min.css?t={{version.app_version}}" rel="stylesheet">

现在就实现了重新部署就更新版本号,稳定运行就不更新

相关文章
|
自然语言处理 JavaScript 前端开发
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
192 0
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
|
JavaScript 前端开发
Javascript之旅——第七站:说说js的调试
原文:Javascript之旅——第七站:说说js的调试      最近比较吐槽,大家都知道,现在web前端相对几年前来说已经变得很重了,各种js框架,各种面对对象,而且项目多了,就会提取公共模块, 这些模块的UI展示都一样,不一样的就是后台逻辑,举个例子吧,我们做企业差旅的时候,通常都有一个成本中心的js公共模块,客户在预定机票 的时候来填写这个成本中心,而这种成本中心分布在online,offline和app等预定端,这样也是方便后期和客户公司进行月结算。
863 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
232 2
|
10月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
153 1
JavaScript中的原型 保姆级文章一文搞懂
|
10月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
95 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
339 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
188 3
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
176 4
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
187 4