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操作HTML自定义属性的方法
Feb 10 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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 程序授权验证开发思路
2009/07/09 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
深入理解NumPy简明教程---数组2
2016/12/17 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
木工主管岗位职责
2013/12/08 职场文书
医院实习接收函
2014/01/12 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
拾金不昧表扬信
2015/01/16 职场文书
网络营销计划
2015/01/17 职场文书
人事任命通知书
2015/04/21 职场文书
罚款通知怎么写
2015/04/22 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python
React四级菜单的实现
2022/04/08 Javascript