Node4-5静态资源服务器实战以及优化压缩文件实例内容

浏览器控制台看一下RequestHeader有一个Accept-Encoding,而RespondHeaders中也会有一个Content-Encoding和他进行对应.

Accept-Encoding当我们的浏览器发起一个文件的请求时告诉服务器支持哪几种压缩方式,也就是服务器用这几种压缩方式浏览器都能解压,当服务器接收到请求后,知道浏览器支持的压缩方式,服务器就会自动识别其中一种进行压缩并且告诉浏览器自己用了哪个方式压缩,浏览器知道后就知道用哪种对应方式解压了

根据拓展名限制一下支持的几钟压缩类型

defaultConfig.js

压缩方法 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静态资源服务器实战_优化压缩文件的全部知识点内容,感谢大家的阅读和对我们的支持。

(0)

相关推荐

  • Node4-5静态资源服务器实战以及优化压缩文件实例内容

    浏览器控制台看一下RequestHeader有一个Accept-Encoding,而RespondHeaders中也会有一个Content-Encoding和他进行对应. Accept-Encoding当我们的浏览器发起一个文件的请求时告诉服务器支持哪几种压缩方式,也就是服务器用这几种压缩方式浏览器都能解压,当服务器接收到请求后,知道浏览器支持的压缩方式,服务器就会自动识别其中一种进行压缩并且告诉浏览器自己用了哪个方式压缩,浏览器知道后就知道用哪种对应方式解压了 根据拓展名限制一下支持的几钟压缩

  • 手写Node静态资源服务器的实现方法

    想写静态资源服务器,首先我们需要知道如何创建一个http服务器,它的原理是什么 http服务器是继承自tcp服务器 http协议是应用层协议,是基于TCP的 http的原理是对请求和响应进行了包装,当客户端连接上来之后先触发connection事件,然后可以多次发送请求,每次请求都会触发request事件 let server = http.createServer(); let url = require('url'); server.on('connection', function (so

  • Node.js动手撸一个静态资源服务器的方法

    简介 本文介绍了一个简单的静态资源服务器的实例项目,希望能给Node.js初学者带来帮助.项目涉及到http.fs.url.path.zlib.process.child_process等模块,涵盖大量常用api:还包括了基于http协议的缓存策略选取.gzip压缩优化等:最终我们会发布到npm上,做成一个可以全局安装.使用的小工具.麻雀虽小,五脏俱全,一想是不是还有点小激动?话不多说,放码过来. 文中源码地址在最后附录中. 可先行体验项目效果: 安装:npm i -g here11 任意文件夹

  • Node 搭建一个静态资源服务器的实现

    使用 Node 的内置模块,创建一个可以访问目录的静态资源服务器,支持fs文件读取,资源压缩与缓存等. 一.创建 HTTP Server 服务器 Node 的 http 模块提供 HTTP 服务器和客户端接口,通过 require('http') 使用. 先创建一个简单的 http server.配置参数如下: // server/config.js module.exports = { root: process.cwd(), host: '127.0.0.1', port: '8877' }

  • 利用nginx搭建静态资源服务器的方法步骤

    以windows为例,linux其实一样: 搭建静态资源服务器 我电脑上的work文件夹下面有很多图片,我想通过nginx搭建静态资源服务器,通过在地址栏输入ip+port的方式完成目录的映射 找到nginx安装目录,打开/conf/nginx.conf配置文件,添加一个虚拟主机 添加监听端口.访问域名 重点是添加location, 映射-URL:/work/; 注意:如果当前server模块中已有一个location且URL为"/",那么新建的location的url应为匹配路径,不

  • Node.js开发静态资源服务器

    目录 正文 静态资源服务器 模块化 最后 正文 在09年Node.js出来后,让前端开发人员的开发路线变的不再那么单调,经过这么多年的发展,我们的开发基本已经离不开Node.js,不管是用作于工具类的开发,还是做完服务端的中间层,Node.js都占据了非常重要的地位,今天我们就一起通过原生的js+Node来实现一个简单的静态资源服务,如果你还不了解这方面的知识,那就跟我一起来学习吧! 静态资源服务器 Node.js经过这么多年的发展,已经有了很多很优秀的基础框架或类库,像express.js.K

  • 基于 Node 实现简易 serve静态资源服务器的示例详解

    目录 前言 基础示例 简易 serve 实现 arg - 命令行参数读取 chalk - 控制台信息输出 源码 扩展 rewrite 和 redirect 的区别? 前言 静态资源服务器(HTTP 服务器)可以将静态文件(如 js.css.图片)等通过 HTTP 协议展现给客户端.本文介绍如何基于 Node 实现一个简易的静态资源服务器(类似于 serve). 基础示例 const fs = require("node:fs"); const fsp = require("n

  • vue打包静态资源后显示空白及static文件路径报错的解决

    今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1.记得改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. build: { index: path.resolve(__dirname, '../dist/ind

  • 详解nginx静态资源服务器简单配置

    传统的web项目,一般都将静态资源存放在 webroot的目录下,这样做很方便获取静态资源,但是如果说web项目很大,用户很多,静态资源也很多时,服务器的性能 或许就会很低下了.这种情况下一般都会需要一个静态资源的服务器. 搭建nginx服务器首先得安装nginx服务,关于nginx服务的安装可以参考我的另一篇博客<nginx服务安装>这里直接介绍静态服务器的配置 进入nginx安装目录的conf目录下,修改nginx.conf文件,在一个server{}中添加 一个location 部分配置

  • Nginx 过滤静态资源文件的访问日志的实现

    凌乱的日志 日常使用的 Nginx 大都既做静态资源服务器,也做反向代理服务器,尤其有些时候考虑到跨域问题,会对静态资源和后端接口使用同一个监听端口,如果不做一下过滤处理,会在 access_log 中看到大量的例如 js.css.jpg 等静态资源的请求,比较影响查看后端接口调用的日志 本来没有很在意这个东西,不过在浏览一篇关于 Nginx 优化的文章时,发现了一种用 map 定义一个是否写日志的参数的方法,结合最近使用 map 做动态的跨域配置,索性也是学习及记录一下 map 的另一个使用场

随机推荐