灯塔一直警告我 低效的缓存寿命 尽管我已经为我的静态文件增加了缓存 缺失的作品是"Nuxt Image"及其生成的URL.
我将分享我用来建立Nuxt文件、公共资产和优化图像的简单缓存设置, 基本规则很简单:在更改文件时,缓存文件会激烈地改变其URL.
当同一个URL日后可以服务不同内容时,要更加小心.
你可能也见过同样的灯塔警告: 使用高效的缓存寿命。
对静态文件的浏览器缓存通常是直截了当的.
您添加了页眉,选择合理的寿命,浏览器避免在每次访问中再次下载相同的文件.
然而,在Nuxt应用程序中,并不是每个静态外观文件都应该使用相同的缓存策略.
Nuxt 构建文件是自动版本的.
里面的文件通常不是。
Nuxt Image 也创建了 .
下的已变换的图像 URL,它们需要自己的缓存规则.
包括我在最近一次灯塔审计中缺失的Nuxt Image规则。
简单的缓存规则 最重要的问题不是文件是图像,字体,还是JavaScript文件.
重要的问题是:当文件更改时URL会改变吗?
当答案为是时,可以安全地缓存文件很长一段时间.
当答案为否时,您应当使用更短的缓存寿命.
否则,访客可能会在部署更新后继续看到旧版本.
缓存指令的含义是这里是这个设置中使用的主要指令:允许浏览器和CDN等共享缓存存储响应.
控制浏览器认为文件是新鲜的长度。
控制 Cloudflare 等共享缓存的长度。
告诉浏览器,当URL存在时,文件预计不会被更改.
这里最重要的一个是。
您只应在更改文件时使用它, 才会生成新的 URL 。
Nuxt 1中的三大资产类型.
Nuxt 构建文件: Nuxt 和 Vite 生成包含内容散列的文件名 。
例如:当文件更改时,其散列也会改变.
这意味着 URL 的改变: 可能变成类似的东西: 在再次部署之后。
这使得Nuxt建立文件 完美的候选人 攻击性切入。
您可以缓存它们一年并使用, 因为下次部署将会在文件内容变化时引用完全不同的文件 。
2.
Nuxt目录中文件内部的文件工作不同.
例如: 服务为: 问题在于其URL不会在文件更改时自动更改.
您可以在下次部署时替换, 同时保留完全相同的 URL : 如果该文件被缓存了一年,一些用户可以继续看到旧的标志.
对于这些文件,我通常做两件事之一: 给他们一个合理的缓存寿命,比如几天或几周.
当我需要冲动的缓存时, 将文件名版本化 。
例如: 或: 一旦文件名本身在内容改变时发生变化, 长期缓存会变得更加安全 。
3.
Nuxt 图像文件 : 这是引起我灯塔警告的部分 当与本地IPX供应商使用Nuxt Image时,浏览器往往不会直接请求您原有的图像.
相反, Nuxt 生成一个可以看起来像这样的被转换的图像 URL : 该URL包含关于所请求的转换的信息,如图像质量和维度等.
因此,您可能有一个原始图像: 当浏览器实际加载时: 这是两个完全不同的HTTP请求.
因此,它们可以有完全不同的缓存头.
这正是我错过的 我已经为我的普通图像目录 配置了缓存, 但灯塔公司抱怨 生成的请求。
添加规则不会自动缓存 。
这里还有另一个重要细节。
我不认为IPX URL 默认是完全不可改变的.
一、导 言