webpack+express实现文件精确缓存的示例代码


Posted in Javascript onJune 11, 2020

由于最近开发的个人博客(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+express实现文件精确缓存的示例代码的文章就介绍到这了,更多相关webpack+express文件精确缓存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
详解vue 组件
Jun 11 #Javascript
vue实现员工信息录入功能
Jun 11 #Javascript
JavaScript Event Loop相关原理解析
Jun 10 #Javascript
vue Element左侧无限级菜单实现
Jun 10 #Javascript
详解用js代码触发dom事件的实现方案
Jun 10 #Javascript
Vue中key的作用示例代码详解
Jun 10 #Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 #Javascript
You might like
php获取post中的json数据的实现方法
2011/06/08 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
js history对象简单实现返回和前进
2013/10/30 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
详解vue v-model
2020/08/31 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
python如何写try语句
2020/07/14 Python
python如何快速生成时间戳
2020/07/21 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
什么是Rollback Segment
2013/04/22 面试题
高中学生干部学习的自我评价
2014/02/21 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
读书活动总结范文
2014/04/26 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android