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">
相关文章
|
20天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
11天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
11天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
54 1
|
16天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
32 3
|
20天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
27天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
78 6
|
6月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
105 0
|
Web App开发 编解码 前端开发
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
149 0
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
|
Web App开发 移动开发 前端开发
梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能。
梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
|
JavaScript 前端开发 UED
为什么 CSS 动画比 JavaScript 高效?
为什么 CSS 动画比 JavaScript 高效?
134 0
为什么 CSS 动画比 JavaScript 高效?