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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
javascript 特性检测并非浏览器检测
Jan 15 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 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
php基础知识:类与对象(5) static
2006/12/13 PHP
php解析xml方法实例详解
2015/05/12 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
vue自定义一个v-model的实现代码
2018/06/21 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
在Python的Django框架中编写编译函数
2015/07/20 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python如何统计代码运行的时长
2019/07/24 Python
解决python flask中config配置管理的问题
2019/07/26 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python数据预处理方式 :数据降维
2020/02/24 Python
python画环形图的方法
2020/03/25 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
班班通校本培训方案
2014/03/12 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
铣工实训报告
2014/11/05 职场文书
考试后的感想
2015/08/07 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
redis cluster支持pipeline的实现思路
2021/06/23 Redis
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
CSS的calc函数用法小结
2022/06/25 HTML / CSS