根据之前的配置,假设文件上传至服务器中,没有加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. 【搬运】NumPy_for_Matlab_Users

    搬运自:http://scipy.github.io/old-wiki/pages/NumPy_for_Matlab_Users.html. 1.Introduction MATLAB和NumPy/S ...

  2. Halcon 学习2 金属雕刻字识别

    *HALCON 里面的例程名称:engraved_cnn.hdevread_image (Image, 'engraved')get_image_size (Image, Width, Height) ...

  3. 最新 思贝克java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.思贝克等10家互联网公司的校招Offer,因为某些自身原因最终选择了思贝克.6.7月主要是做系统复习.项目复盘.LeetCo ...

  4. 记录项目中easyui的运用

    1.实现合并列,且文字显示居左,背景为固定颜色 效果图: 实现代码: $('#tab').datagrid({ title : '', //表格标题 iconCls : 'icon-list', // ...

  5. JS中根据某个值进行大小排序

    //从大到小排序 function compareBigToSmall(property){ return function(a,b){ var value1 = a[property]; var v ...

  6. python 计算文件夹里所有内容的大小总和

    计算文件夹里所有内容的大小总和 递归方法 '''计算文件夹的大小''' import os def dir_file_size(path): if os.path.isdir(path): file_ ...

  7. 基于nginx与zookeeper的API Gateway实现笔记 - 环境搭建

    为了简化操作,采用操作系统为CentOS 8. 首先需要编译出libzookeeper,在官网下载最新的zookeeper源码,或者github上clone一个,地址为:https://github. ...

  8. JAVA_split 字符串按照 . 分割

    split 按照 . 分割字符串时 需要进行转义 代码: String[] str = obj_str.split("\\.") split 按照 \ 分割字符串时 需要多次转义 ...

  9. 堆学习笔记(未完待续)(洛谷p1090合并果子)

    上次讲了堆,别人都说极其简单,我却没学过,今天又听dalao们讲图论,最短路又用堆优化,问懂了没,底下全说懂了,我???,感觉全世界都会了堆,就我不会,于是我决定补一补: ——————来自百度百科 所 ...

  10. php微信小程序生成二维码,出现乱码,{"errcode":44002,"errmsg":"empty post data"},'{"errcode":41001,"errmsg":"access_token missing hint: [OoC.2a0822e255]"}',以及其他的坑

    微信小程序的坑简直比我的头发还多,今天下午获取微信二维码,遇到的44002,41001,还有图片没法正常显示以及小程序参数获取的问题,接下来一一解决 首先获取微信token然后再获取二维码这个没什么好 ...