前言

有没有这么一种场景    
    
    
    
，项目上线后   


     


     


     


  ，客户使用过程中发现了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配置原理也是一样   

   

   

   

，自行查配置