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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
详解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 和 MYSQL
2006/10/09 PHP
PHP新手上路(十一)
2006/10/09 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHP可变函数学习小结
2015/11/29 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
pandas计数 value_counts()的使用
2019/06/24 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
基于python代码批量处理图片resize
2020/06/04 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
浅析Python 多行匹配模式
2020/07/24 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
四风自我剖析材料
2014/09/30 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript