细说前端打包发布后,浏览器缓存如何清理?其实只需要简单的webpack配置就行

这篇具有很好参考价值的文章主要介绍了细说前端打包发布后,浏览器缓存如何清理?其实只需要简单的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打包输出文件名

先来看看打包差异对比图

第一次打包:未配置

细说前端打包发布后,浏览器缓存如何清理?其实只需要简单的webpack配置就行

第二次打包:未配置

细说前端打包发布后,浏览器缓存如何清理?其实只需要简单的webpack配置就行

第一次打包:配置过后

细说前端打包发布后,浏览器缓存如何清理?其实只需要简单的webpack配置就行

第二次打包:配置过后

细说前端打包发布后,浏览器缓存如何清理?其实只需要简单的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配置原理也是一样,自行查配置文章来源地址https://www.toymoban.com/news/detail-492858.html

到了这里,关于细说前端打包发布后,浏览器缓存如何清理?其实只需要简单的webpack配置就行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端】Vue 部署上线清除浏览器缓存的方式

    修改根目录index.html 在 head 里面添加下面代码 1 2 meta http-equiv = \\\"pragram\\\" content = \\\"no-cache\\\" meta http-equiv = \\\"cache-control\\\" content = \\\"no-cache, no-store, must-revalidate\\\"   配置 nginx 不缓存 html vue默认配置,打包后css和js的名字后面都加了哈希值,不会有缓存问题。但是index.html在服务器端可能是有

    2024年02月09日
    浏览(40)
  • 前端浏览器缓存知识梳理,前端工程师面试题目和答案

    所谓浏览器缓存其实就是指在本地使用的计算机中开辟一个内存区,同时也开辟一个硬盘区作为数据传输的缓冲区,然后用这个缓冲区来暂时保存用户以前访问过的信息。 浏览器缓存过程:  强缓存,协商缓存。 浏览器缓存位置一般分为四类:  Service Worker–Memory Cache–Di

    2024年04月15日
    浏览(52)
  • 如何清理电脑浏览器缓存,4款常用浏览器清理缓存的方法

    浏览器是人们在网络生活中不可缺少的存在,我们使用各种浏览器上网的时候,可能会出现各种程序出错的问题。或者,可能使用浏览器的时间就了,发现电脑有点卡顿,这时候就需要情况缓存了。那么,如何清理电脑浏览器的缓存呢?下面分享4款常用浏览器清理缓存的方法

    2024年02月04日
    浏览(66)
  • 前端浏览器缓存的好处和弊端以及如何处理弊端

    好处: 减少冗余的数据传输,节省带宽。 减轻服务器的请求压力,因为有缓存可以减少向服务器发送请求, 资源从缓存中读取,加快客户端的访问速度。因为无需从服务器请求等待响应 缺点: 系统更新时,如何删除浏览器的缓存资源,加载最新的页面。 Service Worker:是一

    2024年02月12日
    浏览(50)
  • 前端性能优化——包体积压缩插件,打包速度提升插件,提升浏览器响应的速率模式

    –其他的优化可以具体在网上搜索 压缩项目打包后的体积大小、提升打包速度,是前端性能优化中非常重要的环节,结合工作中的实践总结,梳理出一些 常规且有效 的性能优化建议 ue 项目可以通过添加–report命令: \\\"build\\\": \\\"vue-cli-service build --report\\\" ,打包后 dist 目录会生成

    2024年02月12日
    浏览(55)
  • 什么是浏览器缓存(browser caching)?如何使用HTTP头来控制缓存?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月09日
    浏览(48)
  • 如何清除谷歌浏览器的缓存?这里有详细步骤

    如果你想解决加载或格式化问题,以改善你在谷歌Chrome上的浏览体验,那么清除缓存和cookie是一个很好的开始。以下是删除它们的方式和操作。 当你访问一个网站时,它有时会保存(或记住)某些信息。Cookie保存用户的浏览数据(征得他们的同意),缓存通过记住上次访问时

    2024年02月19日
    浏览(37)
  • 如何清除浏览器的 DNS 缓存 (Chrome, Firefox, Safari)

    如何清除浏览器的 DNS 缓存 (Chrome, Firefox, Safari) Chrome Chromium Edge Firefox Safari clear DNS Cache, flush DNS cache 请访问原文链接:https://sysin.org/blog/clear-browser-dns-cache/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org 天下只剩三种(主流)浏览器: Apple Safari Mozilla Firefox

    2024年02月11日
    浏览(49)
  • 在浏览器的舞台上演:前端如何挑战页面刷新的极限

    在无尽的数字海洋中,用户和浏览器之间建立了一座看不见的桥梁,连接了网页的现实与虚拟。而在这座桥上,JavaScript像是一位魔法师,可以通过各种巧妙的技巧,让页面焕然一新,展示出绚丽的景象。 这个博客将带你走进前端的奇妙世界,揭示页面刷新的幕后秘密。从简

    2024年02月04日
    浏览(42)
  • 如何使用 Blazor 框架在前端浏览器中导入和导出 Excel

    摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 Blazor 是一个相对较新的框架,用于构建具有 .NET 强大功能的交互式客户端 Web UI。一个常见的用例是将现有的 Excel 文件导

    2024年02月06日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包