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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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_multisort多维数组排序的使用说明
2011/01/04 PHP
php下连接mssql2005的代码
2011/01/17 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
Javascript学习指南
2014/12/01 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python装饰器基础详解
2016/03/09 Python
简单实现Python爬取网络图片
2018/04/01 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Python检查ping终端的方法
2019/01/26 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
python适合人工智能的理由和优势
2019/06/28 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
校园达人秀策划书
2014/01/12 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
公开服务承诺制度
2014/03/26 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
派出所所长先进事迹
2014/05/19 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
python数字图像处理之图像的批量处理
2022/06/28 Python