webpack指南(三)缓存
缓存
把 /dist 目录中的内容部署到服务器上,客户端(通常是浏览器)就能够访问网站此服务器的网站及其资源。而通过网络获取资源是比较耗时的,这就是为什么浏览器要使用缓存这种技术。可以通过命中缓存,以降低网络流量,使网站加载速度更快。然而,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新,就会使用它的缓存版本。
这里通过output.filename的修改,实现在文件内容变化后,能够请求到新的文件。
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
虽然内容并未发生改变,但由于入口chunk包含了webpack的manifest,导致chunkhash发生了变换,因此需要将manifest分离出去。
webpack.prod.js添加
optimization:{
splitChunks: {
chunks: "all"
},
}


此时,增加了manifest单独的chunk。在文件内容不发生改变时,filename不变。
当改变index.js文件中的内容后,

app的chunkhash发生了改变,而print,manifest对应的chunkhash不变。
webpack指南(三)缓存的更多相关文章
- App架构师实践指南三之基础组件
App架构师实践指南三之基础组件 1.基础组件库随着时间的增长,代码量的逐渐积累,新旧项目之间有太多可以服用的代码.下面是整理的公共代码库. 2.关于加密密钥的保护以及网络传输安全是移动应用安全最关键 ...
- C++11 并发指南三(Lock 详解)
在 <C++11 并发指南三(std::mutex 详解)>一文中我们主要介绍了 C++11 标准中的互斥量(Mutex),并简单介绍了一下两种锁类型.本节将详细介绍一下 C++11 标准 ...
- P6 EPPM R16.1安装与配置指南(三)
P6 EPPM R16.1安装与配置指南(三) 解压:V137390-01.zip 修改 D:\P6_R161\p6suite\database\dbsetup.bat 的行 SET JAR_FI ...
- Swift语言指南(三)--语言基础之整数和浮点数
原文:Swift语言指南(三)--语言基础之整数和浮点数 整数 整数指没有小数的整数,如42,-23.整数可以是有符号的(正数,零,负数),也可以是无符号的(正数,零). Swift提供了8,16,3 ...
- webpack笔记三 管理输出
webpack笔记三 管理输出 增加src/print.js: export default function printMe() { console.log('I get called from p ...
- C++11 并发指南三(Lock 详解)(转载)
multithreading 多线程 C++11 C++11多线程基本使用 C++11 并发指南三(Lock 详解) 在 <C++11 并发指南三(std::mutex 详解)>一文中我们 ...
- 【C/C++开发】C++11 并发指南三(std::mutex 详解)
本系列文章主要介绍 C++11 并发编程,计划分为 9 章介绍 C++11 的并发和多线程编程,分别如下: C++11 并发指南一(C++11 多线程初探)(本章计划 1-2 篇,已完成 1 篇) C ...
- ReadHub项目Kotlin版开发指南(三、MVP架构)
ReadHub项目Kotlin版转换指南(一.环境搭建) ReadHub项目Kotlin版转换指南(二.数据库和网络请求) ReadHub项目Kotlin版转换指南(三.MVP架构) Android ...
- 转:Webpack 指南(整理 草稿)
基础 安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm.用 npm 全局安装 Webpack: $ npm install webpack -g 通常我们会将 Webpa ...
随机推荐
- python信息收集(四)
在前三篇中,我们介绍了使用python脚本发现二层.三层的主机设备,接下来我们介绍使用python发现第四层主机. 在TCP/IP协议中,第四层为传输层,主要使用的通信协议为TCP协议 ...
- 详细的JavaScript知识梳理和经典的一百个例题,让你掌握JavaScript
这里先做一下JavaScript知识点的梳理,具体的可领取资料 JavaScript语法: js语法.png DOM操作: DOM操作.png 数据类型 面向对象 继承 闭包 插件 作用域 跨域 原型 ...
- tp5.0看点
前置操作:操作一些其他动作,例如要操作其他表格的数据啊,操作之前要有什么动作为前提或者要注意的动作. 模型事件:操作数据,例如照片的上传修改和删除. 两者的区别在于“前置操作”是动作,而“模型事件”只 ...
- 理解分布式一致性:Paxos协议之Basic Paxos
理解分布式一致性:Paxos协议之Basic Paxos 角色 Proposal Number & Agreed Value Basic Paxos Basic Paxos without f ...
- CSS样式3
1.positon:fixed 可以实现网页浏览器上的返回顶部的功能. positon:fixed 表示将当前div块固定在页面的某一个位置(默认为左上角). <!DOCTYPE html> ...
- 再也不用c刷题了!!——c++刷题必备
致读者: 博主是一名数据科学与大数据专业大二的学生,真正的一个互联网萌新,写博客一方面是为了记录自己的学习历程,一方面是希望能够帮助到很多和自己一样处于困惑的读者.由于水平有限,博客中难免会有一些错误 ...
- Hawkeye部署Github监控系统
2019独角兽企业重金招聘Python工程师标准>>> step1:python环境安装 #pwd /usr/local/soft #wget https://www.python. ...
- RMI原理揭秘之远程对象
讨论开始之前,我们先看看网上的一个例子,这个例子我腾抄了一分,没有用链接的方式,只是为了让大家看得方便,如有侵权,我立马***. 定义远程接口: 1 2 3 4 5 6 package com.guo ...
- Markdown中希腊字母与代码对应表
字母 代码 α\alphaα $\alpha$ β\betaβ $\beta$ γ\gammaγ $\gamma$ Γ\GammaΓ $\Gamma$ δ\deltaδ $\delta$ Δ\Delt ...
- 题解 AT3849 【[ABC084C] Special Trains】
本文为UserUnknown原创 题目大意 总共有 \(N\) 个车站,每两个相邻的车站有单向的车. 从第 \(i\) 个站到第 \(i+1\) 个站 需要时间 \(C_i\) 分钟,且第一趟车在 \ ...