根据之前的配置,假设文件上传至服务器中,没有加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. iOS-NSTimer计时器

    (3) 计时器NSTimer + (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget sel ...

  2. Exploit completed, but no session was created.

    在kali上做metasploit实验,步骤如下: msf5 exploit(windows/mssql/mssql_payload) > show options Module options ...

  3. WebGL学习之纹理盒

    原文地址:WebGL学习之纹理盒 我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表 ...

  4. input标签自动填充问题

    <input type='text' placeholder='手机号' /> <input type='text' placeholder='地址' /> <input ...

  5. Memcache安装配置

    介绍 Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等.简单的说就是将数据调 ...

  6. 基于tesseract-OCR进行中文识别

    1. 环境准备 1.1 下载 下载Tesseract-OCR安装包,地址为: https://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-w32- ...

  7. [转帖]分享Oracle的四道经典面试题,值得收藏

    分享Oracle的四道经典面试题,值得收藏 原创 波波说运维 2019-07-20 00:02:00 https://www.toutiao.com/i6713901660919300621/ 概述 ...

  8. PAT甲级 图的遍历 相关题_C++题解

    图的遍历 PAT (Advanced Level) Practice 图的遍历 相关题 目录 <算法笔记>重点摘要 1021 Deepest Root (25) 1076 Forwards ...

  9. 数据分析之--Mataplotlib入门

    目录 Mataplotlib Seaborn 绘制线性图 图片的标题 点和线的样式 X和Y轴可读的映射 直方图 柱状图 条件性柱状图 饼图 箱图 散步图 3D图 Excel数据导入数据库 Matapl ...

  10. python学习-24 局部变量与全局变量

    局部变量与全局变量 1.没有缩进的变量,为全局变量 name = 'jphn' 在子程序里定义的变量,局部变量 2. name = 'jphn' #全局变量 def a(): name='andy' ...