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 相关文章推荐
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
Jquery获取radio选中的值
May 05 jQuery
Vue中对比scoped css和css module的区别
May 17 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
vue 中的动态传参和query传参操作
Nov 09 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中比较时间大小实例
2014/08/21 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Django入门使用示例
2017/12/12 Python
python生成密码字典的方法
2018/07/06 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
旅游管理专业生自荐信范文
2014/01/02 职场文书
给女儿的表扬信
2014/01/18 职场文书
函授自我鉴定范文
2014/02/06 职场文书
成绩单公证书
2014/04/10 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
活动简报范文
2015/07/22 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
深入理解go slice结构
2021/09/15 Golang