当前位置: 首页>>建站开发>>正文


你如何在开发过程中避免缓存?

webfans 建站开发 , , , 去评论

问题描述

在测试网站更改的外观时,是否有一种简单的方法可以阻止所有缓存?我使用WP Super Cache。我可以使用提供的选项删除其缓存,删除浏览器的缓存,然后仍然无法刷新对css或小部件的某些更改。我尝试其他work-arounds,如切换浏览器或计算机,但必须有一个更多的stream-lined工作流程,我可以确保我正在查看我所做的更改,而不是一些缓存的早期格式?什么是最好的解决方案?

最佳解决办法

将样式表的filemtime()添加为版本参数。可以说,您的默认样式表位于css/default.csscss/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。它会监视您的文件,并在它们发生变化时立即更新。它还可以跨多个打开的浏览器同步滚动位置,表单提交等。很酷。

次佳解决办法

在寻找一个简单的解决方案后,我决定找到一些有用的东西!

所以…在考虑之后,我发现了一种在开发新网站时覆盖缓存的好方法……(而且很简单)。

我们需要的是告诉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文件 – 希望这有帮助;)

第三种解决办法

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

第四种办法

我知道这个问题已经得到了答案,但我认为答案对于手头的问题来说仍然过于复杂,实际上根据用户可能是不正确的(虽然没有冒犯),所以我想我还是会分享当我做我的开发时(不仅仅是使用Wordpress),我如何绕过缓存。

大多数现代浏览器都有一种叫做隐身模式的东西。在这种模式下,您的计算机中没有任何内容被缓存,因此每次刷新都是从服务器下载的新鲜平板。在Internet Explorer中,按Ctrl + Shift + P。在Firefox和Chrome中,按Ctrl + Shift + N

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

至于你关于CSS文件的问题(基本上,你的所有资产文件,如图像和Javascript文件),WP Super Cache不会以任何方式缓存这些文件。您对此插件的设置和/或使用不会影响这些文件的提供方式。什么是缓存这些文件是您的浏览器,这就是您进行硬重载的原因。

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

问题是,如果您通过PHP函数在CSS文件的URL上打上时间戳,那就是对HTML的PHP​​评估,这将由WP Super Cache缓存。对同一帖子的每个请求都将具有相同的时间戳,因为正在向用户提供原始时间戳评估的副本。 (如我错了请纠正我。)

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

最后(这是个人偏好,因为我在编码方面真的很棒),使用隐身或强制硬重载不会要求你在HTML页面上添加不必要的标记。当然,添加一个时间戳只能为每个请求增加每个静态文件大约13个字节,但是,就像我说的那样,我是这类东西的坚持者。它还不需要13个字节。

第五种办法

天哪,很多方法来回答这一个!首先,您询问了两个不同的东西:WP Super Cache和CSS文件。这些在不同的地方以不同的方式缓存,因此识别问题的位置非常重要。

如果是WP Super Cache,您可以在开发期间在functions.php中定义常量DONOTCACHEPAGE,以防止WP Super Cache缓存任何内容。不要忘记在发布时删除它!

define('DONOTCACHEPAGE', true);

每个站点还有一个唯一的键可以附加到URL以加载页面的新版本,我相信你可以在”Advanced”标签中找到它。

将其分解为更好的解决方案,您应该考虑设置开发环境和生产环境,其中您的开发环境没有启用WP超级缓存(再次,假设这是您的问题)。

如果你的问题是CSS /JS文件,那么请查看toscho的回答以及上面m0r7if3r的后续评论。

参考资料

本文由朵颐IT整理自网络, 文章地址: https://duoyit.com/article/2181.html,转载请务必附带本地址声明。