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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
图片自动缩小 点击放大
Jul 07 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 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正则
2006/07/07 PHP
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
PHP脚本的10个技巧(2)
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
php银联网页支付实现方法
2015/03/04 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
python发送HTTP请求的方法小结
2015/07/08 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Python urllib3软件包的使用说明
2020/11/18 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
CLR与IL分别是什么含义
2016/08/23 面试题
初中美术教学反思
2014/01/29 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
员工加薪申请报告
2015/05/15 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python