WordPress 在开发过程中如何避免缓存？

问题描述

有没有一个简单的方法来防止所有缓存在测试网站的更改的外观时？我使用 WP 超级缓存。我可以使用提供的选项删除其缓存，删除浏览器的缓存，还有一些对 css 或 widgets 的更改不会刷新。我尝试其他 work-arounds 像切换浏览器或电脑，但必须有一个更多的 stream-lined 工作流程，我可以确保我查看我所做的更改，而不是一些缓存的早期格式？这是最好的解决方案？

最佳解决方案

将样式表的 filemtime()添加为版本参数。可以说，您的默认样式表是在 css/default.css 和 css/default.min.css(不是 style.css) 。当我们在 wp_loaded(不是 init) 上注册样式表时，我们可以将版本作为第四个参数传递。这将是最后修改的时间，因此每次更改文件时都会发生更改。

$min    = WP_DEBUG ? '': '.min';
$file   = "/css/default$min.css";
$url    = get_template_directory_uri() . $file;
$path   = get_template_directory() . $file;
$handle = get_stylesheet() . '-default';

// Overridden?
if ( is_child_theme() && is_readable( get_stylesheet_directory() . $file ) )
{
    $url  = get_stylesheet_directory_uri() . $file;
    $path = get_stylesheet_directory()     . $file;
}

$modified = filemtime( $path );

add_action( 'wp_loaded', function() use ( $handle, $url, $modified ) {
    wp_register_style( $handle, $url, [], $modified );
});

add_action( 'wp_enqueue_scripts', function() use ( $handle ) {
    wp_enqueue_style( $handle );
});

如果您正在使用 Node.js 和 Grunt，我强烈推荐 Browsersync 。它会随时更改文件并立即更新。它还可以在多个打开的浏览器中同步滚动位置，表单提交和更多。很酷。

次佳解决方案

这可能看起来过于简单，但是在完成网站的开发部分之前，如何禁用缓存呢？打开和关闭是非常简单的。

第三种解决方案

我知道这个问题已经得到了接受，但是我认为这个答案对于现在的问题来说还是太复杂了，根据使用者的不同，实际上可能是错误的，所以我以为我还是会分享当我做我的 dev(不只是 Wordpress) 时，我如何绕过缓存。

大多数现代浏览器都有一些称为隐身模式的东西。在这种模式下，您的计算机中没有任何内容被缓存，所以每次刷新都是从服务器上下载新的。在 Internet Explorer 中，按 Ctrl + Shift + P 。在 Firefox 和 Chrome 中，您按 Ctrl + Shift + N 。

如果您的浏览器没有隐身模式，通常可以通过在 Firefox 和 Chrome 上按 Ctrl + F5 或 IE 或 Ctrl + Shift + R 来强制重新加载。

至于您关于 CSS 文件的问题 (实质上，所有的资源文件，如图像和 Javascript 文件)，WP Super Cache 不会以任何方式缓存这些问题。您的设置和/或此插件的使用不会影响这些文件的投放方式。什么是缓存这些文件是您的浏览器，这就是为什么你要重新加载的原因。

插件的作用是评估 Wordpress 如何构建 HTML 文件 (通过 PHP)，并存储副本，以便下次有人请求相同的帖子，页面或其他内容时，它将提供副本，而不必再次重新评估 PHP-generated HTML，因此节省了一些计算时间，更快地加载您的网页。 (我希望很清楚。)

问题在于，如果您通过 PHP 函数拍摄 CSS 文件的 URL 上的时间戳，那么这是 HTML 对 HTML 的评估，并且将被 WP Super Cache 缓存。对同一帖子的每个请求将具有相同的时间戳，因为用户正在为原始时间戳评估的副本提供服务。 (如我错了请纠正我。)

WP Super Cache 缓存的正确方法是在插件的设置页面中将 Don't cache for known users 选项设置为 true 。

最后 (这是一个个人喜好，因为我是一个真正的 stickler，当涉及到编码)，诉诸使用隐身或强制重新加载不会要求您添加不必要的标记在您的 HTML 页面。当然，添加时间戳每个请求每个静态文件增加大约 13 个字节，但是像我说的那样，我是一个这样的东西的 stickler 。仍然需要 13 个字节。

第四种方案

在寻找一个简单的解决方案很多次后，我决定找到一些有用的东西！

所以… 在思考之后，我发现了一个伟大的方式来覆盖缓存，而开发新的网站…(和它的容易) 。

我们需要的是告诉 wp 这是一个这样的新的 CSS 版本…

变更前：

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

变更后：

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

这是我们添加的：

?v='.time()

说明：我们基本上添加一个动态版本号到 css 文件，强制浏览器加载新的 css 每次我们更新它。

完成开发后不要忘记删除它，否则您的缓存将无法对此文件起作用，并且会一次又一次地为返回的用户加载。

这种技术适用于 css& js 文件 – 希望这有帮助;)

参考文献

How do you avoid caching during development?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

WordPress 在开发过程中如何避免缓存？