如何解决无论缓存控制标头如何,Chrome 都不会缓存 Webpack 动态导入的 javascript 块;火狐缓存
我的主页中有一个入口包,它在 DOMContentLoaded
之后使用 import()
动态导入一个沉重的 JS 块。
在网络选项卡中查看 DevTools,我看到行为完全符合预期:在 DOMContentLoaded 之后,发出一个新请求来加载该单独的块。
但是,我注意到虽然所有其他块(初始同步块,立即加载)都被正确缓存(它们的状态是灰色的 200,大小为 memory_cache
),但动态导入的块总是被服务器请求,更糟糕的是,它以 200 状态重新下载,即使它的内容没有改变。
这在 Firefox 中根本不会发生;动态导入也会被缓存。
所有动态导入都会发生这种情况,无论页面或条目包如何。
在 Chrome 中检查那些动态导入资产的响应标头,您可以清楚地看到它应该被缓存:
cache-control: max-age=315360000
cache-control: public
content-encoding: gzip
content-length: 210215
content-type: application/javascript
date: Sat,15 May 2021 19:33:45 GMT
expires: Thu,31 Dec 2037 23:55:55 GMT
last-modified: Sat,15 May 2021 19:32:27 GMT
pragma: public
server: Nginx
vary: Accept-Encoding
这是一个带有 Webpack 5 gem 设置的 Rails 6,因此所有包都从 /packs/
提供。这是 Nginx 配置:
location ~ ^/(assets|packs|images|javascripts|stylesheets|swfs|system|uploads|blog-media)/ {
gzip_static on;
expires max;
add_header Cache-Control public;
add_header Pragma public;
add_header ETag "";
break;
}
- 我的 Chrome 开发工具中没有选择“禁用缓存”;
- 最后修改的响应头稳定(它没有改变);
- 文件名是稳定的(不会改变);
- 内容长度没有改变;
- 我已使用 diffchecker.com 逐行比较正在缓存的块的 REQUEST 和 RESPONSE 标头以及未缓存的动态块...实际上没有区别,但对于明显的 {{1} } 和
path
字段;
还需要注意的是,在 Firefox 中,如果我使用 CMD R 重新加载页面,它会自动将 content-length
添加到请求标头中,但这会使 Nginx 返回 {{1 }} 对于所有块(因此,请求命中服务器并出现在 Nginx 日志中,但由于 304 响应而没有下载任何内容,并且 Cache-Control max-age=0
出现在传输的列中。但是如果我单击我的徽标(充当导航到主页),然后我看到 200 状态,304
在transfered 列中,并且没有请求命中Nginx。一切都符合预期。
然而,Chrome 的行为完全不同。 CMD R 不会添加该 in cache
标头,因此所有块(动态导入除外)在大小列中返回 200 和 in cache
。这些不会影响 Nginx。但是,动态导入请求不仅命中 Nginx,而且 Nginx 返回 200 状态,强制下载,所以我不明白为什么 Nginx 再次发送资产(200)而不是 304 响应就像 Firefox 一样。
我尽可能自定义 Nginx 日志以将 cache-control max-age 0
添加到输出中,但对于动态导入它是空的; (如上所述,当我重新加载页面时,我可以看到 Firefox 的 (memory cache)
)。
更新 这太奇怪了,它是随机发生的。每大约 5 次使用 CMD+R 重新加载一次,动态块也会按预期显示为缓存:
也许我遇到了 Chrome 错误? (Chrome 版本 90.0.4430.212),因为 Firefox 按预期工作?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。