位置: IT常识 - 正文
细说前端打包发布后，浏览器缓存如何清理？其实只需要简单的webpack配置就行(前端打包发布)
编辑：rootadmin推荐整理分享细说前端打包发布后，浏览器缓存如何清理？其实只需要简单的webpack配置就行(前端打包发布)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:前端打包是什么意思,前端打包命令,前端打包后怎么部署,前端打包后怎么部署,前端打包后的文件 能读懂吗,前端打包是什么意思,前端打包是什么意思,前端打包后怎么部署,内容如对您有帮助，希望把文章链接给更多的朋友！
有没有这么一种场景，项目上线后，客户使用过程中发现了bug，你急急忙忙改完，发布。但你发布后
测试人员或者客户会说：“你这改了没用啊”。
你：“清下缓存试试”
客户：“？？？？”
那么这篇文章带你认识浏览器缓存，及清除浏览器的缓存办法。让你不再为了缓存而烦恼！！
浏览器缓存
众所周知任何网页第一次打开和后面打开的速度是不一样的，如果前端没有做路由懒加载，那么会加载很多资源。但后续加载就会很快，这其中就是浏览器缓存的好处
缓存带来的好处提高网页加载速度，减少响应时间缓解服务器压力减少带宽消耗强缓存和协商缓存强缓存（本地缓存）不会向服务器发送请求，直接从缓存中读取资源，强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control
Expires 缓存过期时间，用来指定资源到期的时间，是服务器端具体的时间点 是 HTTP/1 的产物，受限于本地时间，如果修改了本地时间，可能会造成缓存失效Cache-Control HTTP/1.1 的产物，比如当设置Cache-Control:max-age=300，单位是s，代表5分钟内再次请求就会走强缓存协商缓存当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的HTTP状态为304 (Not Modified)，该请求不携带实体数据，若未命中，则返回200并携带资源实体数据。协商缓存是利用的是Last-Modified，If-Modified-Since和ETag、If-None-Match这两对Header来管理的
清除浏览器缓存的方式:配置webpack打包输出文件名先来看看打包差异对比图
第一次打包：未配置第二次打包：未配置第一次打包：配置过后第二次打包：配置过后附上主要配置代码
const { defineConfig } = require('@vue/cli-service')const timestamp = new Date().getTime()module.exports = defineConfig({ configureWebpack: { output: { // 修改输出js目录名及文件名 filename: `js/[name]-test-${timestamp}.js`, chunkFilename: `js/[name]-test-${timestamp}.js`, }, },})总结由此可见，没配置过的webpack输出文件名，每次打包产生的文件是一样的，所以浏览器缓存以为还是之前的js文件，就直接从缓存获取，在项目中配置webpack打包输出文件名还是很有必要的，是杜绝发布后存在的缓存问题的最有效方式，知道了配置的原理，vite配置原理也是一样，自行查配置
上一篇：uniapp通过watch监听和computed的使用(uniapp监听网络状态)
下一篇：e_srcv03.exe是什么进程 e_srcv03进程是安全程序吗(csrsv.exe是什么)