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
express给html设置缓存,webpack + express 实现文件精确缓存相关推荐
- express给html设置缓存,webpack+express实现文件精确缓存的示例代码
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...
- 大厂都拿捏的缓存方案,平台级分布式缓存,什么业务才合适?
所有程序猿都对那缓存并不陌生,好似那风一样的女子只为你独自而舞.只见那回眸一笑百媚生,让你甚是吝惜,惹人怜爱. 但随着项目规模不断增大变强,光是单个缓存就难以招架,优而显得力不从心. 这时伴随着多级缓 ...
- 如何使用Node.js,Express和MongoDB设置GraphQL服务器
by Leonardo Maldonado 莱昂纳多·马尔多纳多(Leonardo Maldonado) 如何使用Node.js,Express和MongoDB设置GraphQL服务器 (How to ...
- node ,express框架后台设置跨域操作,路由中间件
express项目入口文件下app.js 设置跨域操作 app.all('*', function(req, res, next) { res.header("Access-Control- ...
- webpack打包缓存_【第835期】Webpack 的静态资源持久缓存
原标题:[第835期]Webpack 的静态资源持久缓存 前言 你现在还在休假吗?早读课节前以web pack漫谈结尾,今年就以web pack开始吧.今日早读文章由众成翻译@yanni4night带 ...
- express路由子路由器_使用Express在Node中构建您的第一个路由器
express路由子路由器 本文最初发布在Okta开发人员博客上 . 感谢您支持使SitePoint成为可能的合作伙伴. 如果最近几年您使用Node进行过任何Web开发,那么您可能已经使用过Expre ...
- github nodejs mysql_GitHub - lizhuohaicode/express: nodejs服务端开发(Express+Mysql)---小k博客...
nodejs服务端开发(Express+Mysql) 项目展示 git clone git@github.com:htmlk/express.git 2.再导入express.sql到数据库,数据库名 ...
- express,multer,jQuery前端后端上传单个文件
文章目录 先安装基本的模块 附上multer的github当中别人汉化的API文档 开始创建基本express(上传图片) 测试是否正常 前端部分 前端需要注意的 multer使用 multer({} ...
- Express框架学习记录一:Express框架基础使用
Express框架 一.什么是Express框架 二.安装Express 三.框架的使用 1.监听get/post请求 2.获取 URL 中携带的查询参数 四.中间件 1.use中间件 2.中间件的作 ...
最新文章
- 说说设计模式~建造者模式(Builder)
- 描述文件安装失败无法连接到服务器_iOS13 Beta安装失败解决办法
- BERT源码分析(PART III)
- php遍历文件制作删除,使用PHP遍历文件目录与清除目录中文件的实现详解
- 工具,帮助我们更高效的工作
- 【CCCC】L2-029 特立独行的幸福 (25分),模拟题,set用法
- matlab 分水岭法,matlab中的分水岭算法
- matlab节约里程法_MATLAB语言基础-中国大学mooc-试题题目及答案
- 如何在Google Play 当中使用ASO?google play aso
- 翁恺慕课C语言作业 第三章时区换算
- Firewall常用
- 增加检测类别?这是一份目标检测的基础指南
- unity android 30帧,解除某Unity游戏的30帧帧率限制
- DFRobot语音识别模块推荐-Gravity: I2C离线中文语音识别模块
- springboot整合rabbitmq的发布确认,消费者手动返回ack,设置备用队列,以及面试题:rabbitmq确保消息不丢失
- Arcgis小技巧【1】——地理配准
- 吴式太极大师修丕勋简介
- java高效随机生成随机(英文+数字),可自定义
- 自己能力还有待改善,介绍一下我自己
- IP ICMP TCP UDP 校验和