Node4-5静态资源服务器实战以及优化压缩文件实例内容


Posted in Javascript onAugust 29, 2019

浏览器控制台看一下RequestHeader有一个Accept-Encoding,而RespondHeaders中也会有一个Content-Encoding和他进行对应.

Accept-Encoding当我们的浏览器发起一个文件的请求时告诉服务器支持哪几种压缩方式,也就是服务器用这几种压缩方式浏览器都能解压,当服务器接收到请求后,知道浏览器支持的压缩方式,服务器就会自动识别其中一种进行压缩并且告诉浏览器自己用了哪个方式压缩,浏览器知道后就知道用哪种对应方式解压了

 Node4-5静态资源服务器实战以及优化压缩文件实例内容

 Node4-5静态资源服务器实战以及优化压缩文件实例内容

 根据拓展名限制一下支持的几钟压缩类型

defaultConfig.js

Node4-5静态资源服务器实战以及优化压缩文件实例内容

压缩方法 compress,js

//压缩的方法
/**rs 肯定需要,要知道自己需要压缩什么  客户端(浏览器支持哪几种压缩类型),
 * req 客户端再requestHeader中声明的
 * res 压缩完成之后,需要告诉浏览器使用哪种压缩类型压缩,方便浏览器用对应方式进行解压
 * */
const {
  createGzip,
  CreateDeflate
} = require('zlib')
module.exports = (rs, req, res) => {
  const acceptEncoding = req.headers['accept-encoding'];
  /* 有两种情况不能压缩
  1.浏览器已经声明不支持任何压缩方式,拿不到这个信息
  2.拿到的东西里面没有服务器支持
  */
  if (!acceptEncoding || !acceptEncoding.match(/\b(gzip|deflate)/)) {
    return rs
  } else if (acceptEncoding.match(/\bgzip\b/)) {
    {
      res.setHeader('Content-Encoding', 'gzip')
      return rs.pipe(createGzip())
    }
  }else if (acceptEncoding.match(/\bdeflate\b/)) {
    {
      res.setHeader('Content-Encoding', 'deflate')
      return rs.pipe(createGzip())
    }
  }
}

route.js 引用compress

Node4-5静态资源服务器实战以及优化压缩文件实例内容

运行结果

Node4-5静态资源服务器实战以及优化压缩文件实例内容

Node4-5静态资源服务器实战以及优化压缩文件实例内容

如果把相关压缩的代码注释掉

Node4-5静态资源服务器实战以及优化压缩文件实例内容

Node4-5静态资源服务器实战以及优化压缩文件实例内容

 

以上就是Node4-5静态资源服务器实战_优化压缩文件的全部知识点内容,感谢大家的阅读和对三水点靠木的支持。

Javascript 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
小程序富文本提取图片可放大缩小
May 26 Javascript
JS实现点击掉落特效
Jan 29 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 #Javascript
微信小程序实现购物车代码实例详解
Aug 29 #Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 #Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 #Javascript
Angular8路由守卫原理和使用方法
Aug 29 #Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 #Javascript
vue父子组件通信的高级用法示例
Aug 29 #Javascript
You might like
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php内嵌函数用法实例
2015/03/20 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
js加解密 脚本解密
2008/02/22 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
python遍历数组的方法小结
2015/04/30 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python正则表达式经典入门教程
2017/05/22 Python
python opencv之SURF算法示例
2018/02/24 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
如何理解Python中包的引入
2020/05/29 Python
Python如何telnet到网络设备
2021/02/18 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
教师校本培训方案
2014/02/26 职场文书
元旦趣味活动方案
2014/08/22 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
汽车转让协议书
2015/01/29 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
推普标语口号大全
2015/12/26 职场文书
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server