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中的parseInt使用技巧
Sep 03 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
php实现评论回复删除功能
2017/05/23 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python3简单实现微信爬虫
2015/04/09 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
keras slice layer 层实现方式
2020/06/11 Python
环境工程专业个人求职信
2013/12/05 职场文书
《秋游》教学反思
2014/04/24 职场文书
计算机软件专业求职信
2014/06/10 职场文书
科学发展观标语
2014/10/08 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
SQL Server使用导出向导功能
2022/04/08 SQL Server