根据之前的配置,假设文件上传至服务器中,没有加hash,如果页面内容有更改,浏览器刷新的时候,请求的还是原先的文件,也就是浏览器的缓存,因为名字没有变。现在我们在上线的webpack配置中加上hash
output:{
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].js',
}

这个时候打包出来的文件就有了hash值。只要文件内容不变,hash值就不变,内容变了才变。

如果打包失效,比如老版本的webpack4。这个时候加一个配置参数
optimization:{
  runtimeChunk: {
    name: 'runtime'
  }
}

webpack与浏览器缓存的更多相关文章

  1. webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存)

    webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...

  2. CommonsChunkPlugin并不是分离第三方库的好办法(DllPlugin科学利用浏览器缓存)

    webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...

  3. nginx 与 浏览器缓存

    一.本地静态文件 location /html/{ rewrite ^(html/.*)$ /$1 break; root /data/static; expires 12h; etag off; i ...

  4. 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-in ...

  5. web性能优化:详说浏览器缓存

    TOC 背景 浏览器的总流程图 一步一步说缓存 朴素的静态服务器 设置缓存超时时间 html5 Application Cache Last-Modified/If-Modified-Since Et ...

  6. 理解web缓存 浏览器缓存

    为了: 控制缓存 遇到的现象: 1.开发的时候,浏览器会缓存你的文件,使得你的改动是无效的! 开发过程中:我们是不希望有缓存的. 但正是发布以后,我们是希望页面能够在浏览器缓存,这样用户的体验就会提高 ...

  7. nginx,控浏览器缓存,前端优化方案

    1,困惑 做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...

  8. 关于引用JS和CSS刷新浏览器缓存问题

    有时候我们会碰到上线的新版本都要刷新一次缓存的问题.那是因为改了JS的内容,但是JSP引用的地方后面的字符串未发生改变导致浏览器读取浏览器缓存而不会重新加载新的JS内容,以下提供两种解决方式: 1.每 ...

  9. 浏览器缓存相关的Http头介绍:Expires,Cache-Control,Last-Modified,ETag

    转自:http://www.path8.net/tn/archives/2745 缓存对于web开发有重要作用,尤其是大负荷web系统开发中. 缓存分很多种:服务器缓存,第三方缓存,浏览器缓存等.其中 ...

随机推荐

  1. DefaultListBeanFactory的子类之SimpleAliasRegistry

    DefaultListBeanFactory类结构层次图 从继承图看,SimpleAliasRegistry是DefaultListBeanFactory继承类中最底层的实现类. SimpleAlia ...

  2. windows批量导出文件名到txt

    做图像处理时,经常会遇到训练数据样本,这个时候一般就会要一个保存了大量文件名txt文件作为数据的输入 windows系统中可以直接使用dir,具体使用可以直接打开windows的终端 输入 dir/? ...

  3. 结合 Nginx 谈谈 Http 状态码

    [Http状态码简介] [百度百科]HTTP状态码(英语:HTTP Status Code)是用以表示网页服务器超文本传输协议响应状态的3位数字代码.它由 RFC 2616 规范定义的,并得到 RFC ...

  4. 【ZOJ】4012 Your Bridge is under Attack

    [ZOJ]4012 Your Bridge is under Attack 平面上随机n个点,然后给出m条直线,问直线上有几个点 \(n,m \leq 10^{5}\) 由于共线的点不会太多,于是我们 ...

  5. 部门innercode刷新

    最近遇到一个小需求,就是刷新部门的innercode.在导入数据的时候,innercode乱了,所以需要刷新.那先说说innercode是什么吧. 大家都知道部门是一个树形结构,但是有时候想知道一个部 ...

  6. setting中executable for debug session对话框

  7. Bean的三种实例化方式

    在面向对象程序中,如要使用某个对象,就需要先实例化这个对象.同样的,在Spring中,要想使用容器中的Bean,也需要实例化Bean.实例化Bean有三种方式,分别是:构造器实例化.静态工厂实例化.实 ...

  8. Python【编码】

    编码 ————————————————————————————————让只认识0和1的计算机,能够理解我们人类使用的语言符号,并且将数据转换为二进制进行存储和传输 人类语言到计算机语言转换的形式,就叫 ...

  9. django_视图相关

    使用通用视图(返回静态页面) from django.conf.urls.defaults import * from django.views.generic.simple import direc ...

  10. Python中下划线的5种含义

    目录 单前导下划线 _var 当涉及到变量和方法名称时,单个下划线前缀有一个约定俗成的含义. 它是对程序员的一个提示 - 意味着Python社区一致认为它应该是什么意思,但程序的行为不受影响. 单末尾 ...