Hexo更新主题代码之后浏览器缓存问题

2020年12月26日

如果使用nginx作为服务器，然后把hexo生成的静态资源丢进去完成简单部署，会发现修改主题中的js,css文件之后重新部署，浏览器端因其缓存机制并不会去加载新的js和css文件。

解决方式

通过header显式控制缓存

location / {
    # ...
    # 浏览器缓存600s, 过期之后必须向服务端验证缓存的有效性
    if ($request_uri ~* ".(css|js)$") {
        add_header Cache-Control "max-age=600,must-revalidate";
    }
}

问题定位

观察了下静态文件返回的Header的值，发现除了一个last-modified没有其他缓存相关的header。
但是这种情况下浏览器还是会做缓存，经查发现如果只有last-modified，浏览器会自己猜一个合适的过期时间。

去看细节

另一种解决方式，考虑给主题文件加hash

果然还是走hash比较好呀，然后全部cache很长的时间就完事
思路是在hexo generate的时候，对已经修改了的js,css使用新的hashname

考虑到主题文件的更新并不是特别频繁，给js等文件添加hash后缀有点太过折腾，这里就偷了个懒。
在主题的配置文件中添加了一个叫做theme_version的配置项，然后修改主题代码中引入的js代码的后缀。
这姑且算是“人肉加hashname”

<%- css(['css/diaspora.css?v='+theme.theme_version])%>
<%-
js([
    '//cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js',
    'js/plugin.js',
    'js/Vibrant.js',
    'js/jquery.nicescroll.js',
    'js/typed.js',
    'js/diaspora.js?v='+theme.theme_version
])%>

于是每次修改完主题文件顺便修改下theme_version就可以了
虽然输出的结果是css/diaspora.css?v=1.css和css/diaspora.js?v=1.js这种经过hexo的“智能补全”的路径
从结果来看还是可以接受的

查看评论