express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中，发现网络加载有点慢，所以打算对它进行一次优化。本次优化的目标如下：
index.html 设置成 no-cache，这样每次请求的时候都会比对一下 index.html 文件有没变化，如果没变化就使用缓存，有变化就使用新的 index.html 文件。
其他所有文件一律使用长缓存，例如设置成缓存一年 maxAge: 1000 * 60 * 60 * 24 * 365。
前端代码使用 webpack 打包，根据文件内容生成对应的文件名，每次重新打包时只有内容发生了变化，文件名才会发生变化。
以上三点结合，就能实现文件的精确缓存。
换句话说，在一年内，如果我的个人博客没有进行任何更新，那同一台电脑在这段时间内访问网站不会发起任何请求；如果有某个文件更新了，只会请求新的文件，旧的文件依旧从缓存读取。
小知识：
max-age: 设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。在这个时间前，浏览器读取文件不会发出新请求，而是直接使用缓存。
指定 no-cache 表示客户端可以缓存资源，每次使用缓存资源前都必须重新验证其有效性。
webpack 打包
根据文件内容生成文件名
通过配置 output 的 filename 属性可以实现这个需求。filename 属性的值选项中有一个 [contenthash]，它将根据文件内容创建出唯一 hash。当文件内容发生变化时，[contenthash] 也会发生变化。
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js',
path: path.resolve(__dirname, '../dist'),
},
提取第三方库
由于引入的第三方库一般都比较稳定，不会经常改变。所以将它们单独提取出来，作为长期缓存是一个更好的选择。
这里需要使用 webpack4 的 splitChunk 插件 cacheGroups 选项。
optimization: {
runtimeChunk: {
name: 'manifest' // 将 webpack 的 runtime 代码拆分为一个单独的 chunk。
},
splitChunks: {
cacheGroups: {
vendor: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
},
}
},
test: 用于控制哪些模块被这个缓存组匹配到。原封不动传递出去的话，它默认会选择所有的模块。可以传递的值类型：RegExp、String和Function;
priority：表示抽取权重，数字越大表示优先级越高。因为一个 module 可能会满足多个 cacheGroups 的条件，那么抽取到哪个就由权重最高的说了算；
reuseExistingChunk：表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
minChunks(默认是1)：在分割之前，这个代码块最小应该被引用的次数(译注：保证代码块复用性，默认配置的策略是不需要多次引用也可以被分割)
chunks (默认是async) ：initial、async和all
name(打包的chunks的名字)：字符串或者函数(函数可以根据条件自定义名字)
除了提取第三方库外，结合 Vue 使用 import 动态引入组件还能实现按需加载。
express 设置
app.use((req, res, next) => { // 将 index.html 设为 no-cache
if(req.url == '/') {
res.setHeader('Cache-control', 'no-cache')
}
next()
})
app.use(express.static('dist', {
etag: false,
maxAge: 1000 * 60 * 60 * 24 * 365, // 缓存一年
})) // 将dist设为根目录
详细的代码可以看一下我的个人博客项目。
参考资料
webpack 缓存
一步一步的了解webpack4的splitChunk插件
关于找一找教程网
本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。
[webpack + express 实现文件精确缓存]http://www.zyiz.net/tech/detail-139185.html
相关文章：
2017年50道Java线程面试题
下面是Java线程相关的热门面试题，你可以用它来好好准备面试。 1) 什么是线程？ 线程是操作系统能够进行运算调度的最小单位，它被包含在进程之中，是进程中的实际运作单位。程序员可以通过它进行多处理器编程，你可以使用多…
Python基础08-数据类型：集合set
目录 集合的概念 集合的方法 集合可变吗？ 集合的概念 先理解一些概念。 数据类型按照是否可变分为可变类型、不可变类型。按照访问方式可以分为顺序访问、映射访问。 如何区分可变类型、不可变类型？就看在内存中存储内容是否可以被修改。如果内存地…
主元素问题 Majority Element
2018-09-23 13:25:40 主元素问题是一个非常经典的问题，一般来说，主元素问题指的是数组中元素个数大于一半的数字，显然这个问题可以通过遍历计数解决，时间复杂度为O(n)，空间复杂度为O(n)。这样的算法有两个弊端…
js判断是iOS还是Android
platform.js: var browser{versions:function(){ var u navigator.userAgent, app navigator.appVersion; return { trident: u.indexOf(Trident) > -1, //IE内核 presto: u.indexOf(Presto) > -1, //opera内核 webKit: u.indexOf(AppleWebKit) >…
计算机二级函数知识,2017年全国计算机二级考试MS Office高级应用知识点：INDIRECT函数...
INDIRECT函数知识点适用考试：全国计算机二级考试考试科目：MS Office高级应用科目知识点：INDIRECT函数INDIRECT函数立即对引用进行计算，并显示其内容。当需要更改公式中单元格的引用，而不更改公式本身，请使用…
Python基础09-字符串格式化
字符串格式化。主要是%格式，format格式化方法，具体写在代码例子的注释里。 msg list() # %s 接收字符串 msg.append("i am %s, which is a database." % "mysql") msg.append("i am %s, which is a %s." % ("db2&q…
dbcp 连接池参数说明
dbcp 连接池参数说明 参考：http://commons.apache.org/proper/commons-dbcp/configuration.htmlhttps://www.cnblogs.com/happySmily/p/5941813.html posted on 2018-09-24 10:31 姜小嫌 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/jiangxiaoxi…
Fastlane- app自动编译、打包多个版本、上传到app store
Fastlane是一套使用Ruby写的自动化工具集，用于iOS和Android的自动化打包、发布等工作，可以节省大量的时间。 Github：https://github.com/fastlane/fastlane 官网：https://fastlane.tools/ 文档：https://docs.fastlane.…
计算机基础知识综合试卷一,计算机基础知识试题及答案a
培训选拔试题(A卷)姓名：部门：得分：注意事项：I.A考试时间为90分钟，闭卷考试。I.B应考人员在答题前，请将姓名部门等信息认真准确地填写在答题纸上。I.C应考人员应严格遵守考场纪律，服从监考人员的…
Python基础10-函数基础
目录 函数的定义 函数的返回值 函数的参数 参数的传递 参数的默认值 可变长参数 全局变量与局部变量 函数嵌套定义 风湿理论——函数即变量 函数的定义 定义函数的关键字def。函数名，本例函数名是test。小括号里面是参数。冒号后缩进的代码块是函数内容。…
Milking Cows 挤牛奶
1.2.1 Milking Cows 挤牛奶 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 554 Solved: 108[Submit][Status][Forum]Description 三个农民每天清晨5点起床，然后去牛棚给3头牛挤奶。第一个农民在300时刻(从5点开始计时，秒为单位)给他的牛挤奶ÿ…
用eclipse玩转Python,让习惯java开发的童鞋拥有一个更爽的开发体验
#0>>>>>>>预准备工作：(a标签貌似不能用，，只好比较lowbi的直接放地址） IDEeclipse下载地址:http://ftp.yz.yamagata-u.ac.jp/pub/eclipse/technology/epp/downloads/release/neon/3/eclipse-jee-neon-3-win32…
适合计算机应用的班群名称,班级同学群名字大全
很多人现在都是一个班级建一个群，以便大家沟通交流，有什么事大家群里一说很方便，没事还可以吹吹牛B策策谈，那么同学班级群用什么样的名字好呢，在此起名网为大家收集整理了班级同学群名字大全。来看看吧。最新班级同学群…
Mac 安装多个版本jdk
JDK默认安装路径为/Library/Java/JavaVirtualMachines 多版本安装后效果为: 设置 1.执行以下命令 cd ~open -e .bash_profile #打开.bash_profile文件注:假如.bash_profile文件不存在执行下面命令新建文件 cd ~ touch .bash_profile #新建.bash_profile文件 ls -a #查看文件是…
Python基础11-函数式编程与内置函数
目录 函数即变量 lambda关键字定义匿名函数 高阶函数 内置函数map 内置函数filter 内置函数reduce 内置函数看文档 函数即变量 书接上回，Python里面，函数就是变量，可以被当成普通变量一样作为返回值，调用。 def foo():pr…
学术-数学：哥德巴赫猜想
ylbtech-学术-数学：哥德巴赫猜想哥德巴赫1742年给欧拉的信中哥德巴赫提出了以下猜想：任一大于2的偶数都可写成两个质数之和。但是哥德巴赫自己无法证明它，于是就写信请教赫赫有名的大数学家欧拉帮忙证明，但是一直到死，…
wk_10.md
Python检测和处理异常 try-except语句 try-except语句定义了进行异常监控的一段代码，并且提供了异常处理的机制，下面是使用的语法： try:# 可能抛出异常的语句，会一直执行，直到抛出异常。 except:# 异常处理额语句&…
计算机网络实验五,计算机网络(实验五).docx
计算机网络(实验五).docx实验五一、实验内容在这个实验室里，我们将探讨ICMP 协议得几个方面由 Ping 项目产生得P 信息Tracer ute程序生成得C消息关于 CM 信息得格式与内容。在攻击这个实验室之前,我们鼓励您在第4 3 节中回顾 CMP 得内容 text1. 我们在微软 Win o s …
mac android 真机调试
1.已经安装好Androidstudio或者eclipse 2.下载配置好Android Sdk等 3.将android手机通过USB数据线连接Mac，打开终端输入system_profiler SPUSBDataType 4.找到对应设备的Product ID,并且复制出来 5.终端输入vi ~/.android/adb_usb.ini ，进入vi 6.输入i …
Python基础12-常用的内置函数
abs 取绝对值，数学上的绝对值 print(abs(-1)) all 接收一个可迭代参数。如果里面有一个False的元素，那么返回值就是False，否则返回True，类似逻辑“与”。如果可迭代参数本身为空，那么返回True。需要记住什么是Fals…
Andorid自定义attr的各种坑
本文来自网易云社区作者：孙有军在开发Andorid应用程序中，经常会自定义View来实现各种各样炫酷的效果，在实现这吊炸天效果的同时，我们往往会定义很多attr属性，这样就可以在XML中配置我们想要的属性值，以下就…
JS的Dom树小结
一【DOM树节点】DOM节点分为三大类：元素节点、文本节点、属性节点文本节点、属性节点，为元素节点的两个子节点；通过getElement系列方法，可以去到元素节点。二【查看节点】1、getElementById：通过ID获取唯一的节点&…
高考631能上什么好的计算机学校,2021年高考630分能上什么大学 可以报哪些学校...
高考结束后，最重要的事情就是如何填报志愿，高考630分能上什么大学?高考630分可以读哪些专业等等。小编下面就来为大家分享高考630分能上什么大学，供大家参考!!2021年高考630分能上什么理科大学高校名称专业批次平均分最高分中国科学技术大学…
CV00-01-CV基础理论
目录 CV的level和CV的方向 CV的level CV研究方向 CV应用方向 CV工程方向 CV的路线 CV比较好的会议 CV的平台、框架 认识几个CV的缩写 CV的level和CV的方向 CV的level Low Level，图像的基本操作；比如，图像的变换、像素操作、色彩等…
VC++关于UNICODE版本的开发
关于UNICODE版本的开发 代码转换方案 概述 在VC6.0中，相应的有一些宏来代替ANSI的函数、宏或数据类型，这些宏在ANSI编译条件中处理字符串为单字节，而在UNICODE中处理字符串为双字节，请在编写程序中请使用这些宏。 数据类型 表-1.1…
计算机基础办公软件应用技能,计算机一级计算机基础及 ms office 应用考些什么...
一、计基础知识1.计算机的发展、其应用领域。2.计算机中数据的表示、存储与处理。3.多媒体技术的概念与应用。4.计算机病毒的概念、特征、分类与防治。5.计算机网络的概念、组成和分类;计算机与网络信息安全的概念和防控。6.因特网网络服务的概念、原理和应用。二、操作系统的功…
ffmpeg 编译Android
环境 macOS 10.15.4 NDK 21.3.6528147 ffmpeg 4.2.3 1.执行sudo xcodebuild -license，防止编译的时候找不到一些文件报错 2.下载ffmpeg(4.2.3),解压后进入主目录，修改configure文件，找到 SLIBNAME_WITH_MAJOR$(SLIBNAME).$(LIBMAJOR) LI…
Python基础14-迭代器与生成器
目录 迭代器 官方文档对迭代器的解释 迭代器协议 基于迭代器协议的统一的for循环机制 生成器 官方文档对生成器的解释 生成器函数 生成器表达式 生成器用法举例 利用生成器用单线程实现生产者消费者问题模型 生成器只能遍历一次 迭代器 官方文档对迭代器的解释 Thi…
Android学习笔记进阶九之Matrix对称变换
网上很多的倒影特效实际上就是一个对称变换，在改变透明度即可。 Matrix对称变换包括很多种，有关于Y轴对称，关于X轴对称，关于y -x对称等等。 1 关于Y轴对称 [java] view plaincopy// 获取资源文件的引用res Resources res…
《计算机网络应用基础》模拟试卷(六),《计算机与网络应用基础知识1》模拟试卷...
《计算机与网络应用基础知识1》模拟试卷 (4页)本资源提供全文预览，点击全文预览即可全文预览,如果喜欢文档就下载吧，查找使用更方便哦！9.9 积分《计算机与网络应用基础知识1》模拟试卷 一考生注意：1．本试卷共五道大题&…