通过文件时间来强制浏览器更新JS或CSS文件

2016.02.24 | | 19 Comments

经常折腾 WordPress 主题的博友肯定试过修改完 css 或者 js 文件后,有时候得几经折腾(WordPress 后台禁用/手动清理缓存插件内容、刷新浏览器缓存、刷新 CDN……)才能把新的文件刷出来……最快捷的方法是手动修改 css 或者 js 文件的版本,不过,每修改一次就要手动更新版本号一次,也挺累的。

那么,如何让文件版本号自动更新呢?

方法一:用当前时间作为版本号

比如,我们可以这样控制主题 style.css 的文件版本。

<link rel="stylesheet" href="//yourdomain.com/wp-content/themes/themename/style.css?v=<?php echo time(); ?>">

但这个方法显然会相当耗费服务器资源。因为每刷新一次页面,就要获取当前时间(unix 格式)下的 css文件版本。

方法二:用文件(最后修改)时间作为版本号

filemtime 取得文件修改时间

<link rel="stylesheet" href="//yourdomain.com/wp-content/themes/themename/style.css?ver=<?php echo filemtime(http://yourdomain.com/wp-content/themes/themename/style.css); ?>" />

当然,更好的办法是用钩子,比如可以这样加载 style.css、script.js 文件和通过文件最后修改时间控制它们的版本:

function theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri(), array() , filemtime(get_stylesheet_directory().'/style.css'));
wp_enqueue_script( 'script', get_template_directory_uri().'/js/script.js', array(), filemtime(get_stylesheet_directory().'/js/script.js') , true );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

我现在用的是上面这个代码。

参考文章:

料网 — 无视WordPress缓存强制加载最新CSS和JS

——最近更新:2016年2月25日
支付宝扫码打赏微信打赏

如果文章对您有帮助,欢迎移至上方按钮打赏老杨

声明: 除非注明,常阳时光文章均为原创,转载请以链接形式标明本文地址
本文地址:https://cyhour.com/357/

Comments:19

  1. themebetter13 Google Chrome 46.0.2490.71 Windows 8.1

    新年快乐!过来学习学习。(themebetter更好的主题)

    2016.02.24 15:48 # 回复
    1楼
  2. 已经无感了。你还在折腾~

    2016.02.24 17:54 # 回复
    2楼
  3. 大致18 Firefox 44.0 Windows 7

    应该是$rootdir为空.取个文件目录吧.

    2016.02.25 10:28 # 回复
    3楼
    • 老杨2.16k+ Firefox 44.0 Windows 10 x64 Edition

      @大致 确实,没看出来呢。怪不得不成功。

      2016.02.25 12:18 # 回复
    • 老杨2.16k+ Firefox 44.0 Windows 10 x64 Edition

      @大致 然并卵,$rootdir 怎么定义都出不来,那博客也留言不了,删掉参考了。

      2016.02.25 18:23 # 回复
  4. FROYO14 Google Chrome 48.0.2564.109 Windows 7 x64 Edition

    一开始玩WP的时候也喜欢折腾折腾,最近发现越来越折腾不动了

    2016.02.28 18:14 # 回复
    4楼
  5. 我折腾的少,都是手动刷新。

    2016.02.29 10:07 # 回复
    5楼
  6. 本地倒是没遇到什么缓存问题,cdn上是只能这个方法,不过我都是手动改的。

    2016.03.01 10:12 # 回复
    6楼
  7. Shrek60 Chrome 49.0.2623.73 iPhone iOS 9.2.1

    我都是设置Cache-Contro来控制

    2016.03.12 21:37 # 回复
    7楼
    • 老杨2.16k+ Firefox 44.0 Windows 10 x64 Edition

      @Shrek 这个?https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn , 好像更高级。

      2016.03.14 12:21 # 回复
  8. 郑永120 Google Chrome 45.0.2454.101 Windows XP

    基本不折腾了,博客就是一个传说。

    2016.03.14 22:13 # 回复
    8楼
  9. fooleap117 Google Chrome 49.0.2623.112 Windows 7 x64 Edition

    最近一个项目,在微信里面,某些手机在一些页面停留一段时间后,切换页面总会出现没加载 CSS 的情况,而且再点其他页面也不会在加载了,只能刷新页面才能解决,不知道是什么原因=。=

    2016.05.21 09:35 # 回复
    9楼

发表留言