細水長流

使用文件修改时间作为版本号强制浏览器更新 js 或 css 文件

流水

经常折腾 WordPress 主题，修改完 css 或者 js 文件，少不了清理缓存、刷新浏览器缓存、刷新 CDN……等操作才能把新文件刷新出来……当然最高效方法是手动修改 css 或者 js 文件版本号，不过，总不能每次都手工改吧？

「使用文件修改时间作为版本号强制浏览器更新 js 或 css 文件：https://uxtt.com/39」

那么，如何让文件版本号自动更新呢？这里针对 WordPress 介绍两个方法，有需要可以参考一下。

用当前时间作为文件版本号

比如使用 time() 控制主题 style.css 文件版本，参考代码：

「使用文件修改时间作为版本号强制浏览器更新 js 或 css 文件：https://uxtt.com/39」 
<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 文件和通过文件最后修改时间控制它们的版本：

「使用文件修改时间作为版本号强制浏览器更新 js 或 css 文件：https://uxtt.com/39」 
function mytheme_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', 'mytheme_scripts' );

目前一直在使用方法二，偶尔折腾主题，改改 css 还是挺方便。

本文首发于：使用文件修改时间作为版本号强制浏览器更新 js 或 css 文件-細水長流

「使用文件修改时间作为版本号强制浏览器更新 js 或 css 文件：https://uxtt.com/39」

本文已于 2022-06-19 修改更新，您的宝贵建议请在文章下方评论区留言反馈，谢谢。

退出移动版