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 eval函数深入认识
Feb 21 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
JS实现的字符串数组去重功能小结
Jun 17 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
第六节--访问属性和方法
2006/11/16 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
php实现记事本案例
2020/10/20 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
vue设置动态请求地址的例子
2019/11/01 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
element中的$confirm的使用
2020/04/26 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
Python发送email的3种方法
2015/04/28 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
交通事故委托书范本精选
2014/10/04 职场文书
2014小学年度工作总结
2014/12/20 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技