Related articles

  • P01: Node.js tutorial from a practical perspective
  • P02: Basic node usage
  • P03: Node built-in module PATH
  • P04: Buffer for nodeAPI
  • P05: Events of node built-in module
  • P06: Node built-in module FS (1)
  • P07: Node built-in module FS (2)
  • P08: Node implements static server ~ create project
  • P09: Node implements static server ~ Hello HTTP
  • P10: Node implements static server ~ static file or folder reading
  • P11: Node to achieve static server ~ preliminary optimization experience
  • P12: node Implements static server ~ Content-Type optimization
  • P13: Node implements static server ~ accept-encoding and Content-encoding

Use the advantages of compression

  • Significantly reduce request times
  • The reduced size also reduces the load on our servers, as well as the bandwidth footprint.
  • For front-end pages, this means faster response and presentation
  • The compressed version of static resources is recommended

Accept-encoding and Content-encoding are introduced

Front-end performance optimization is a never-ending journey, today introduces one of the ways of performance optimization, through compression to save HTTP request traffic, implementation process depends on the HTTP header part of the two fields, Accept-encoding (Request Header) and Content-encoding (Response Header)

Meaning and Function

Why talk about what these two fields mean in the first place? Because when you open a page, the request goes to the server, and if the request doesn’t have this coded identifier, the server doesn’t know whether to compress it or not? What kind of compression is used? So the accept-encoding in the Request Header tells the server which encodings are supported by the client. Common values include gzip, compress, deflate, and br. Multiple values are separated by commas. Such as:

Accept-Encoding: gzip, deflate, br
Copy the code

When the server receives the request and gets the encoding identifier from the Response Header, it can choose one of the ways to compress the encoding and send it back to the client. However, if there is no Encoding identifier in the Response Header, the client does not know which compression method is used by the server, so content-encoding (Response Header) is required to identify the compression method used by the server.

In a word:

Accept-encoding (Request Header) Indicates the content Encoding that can be understood by the client. Content-encoding (Response Header) Identifies the type of content-encoding conversion performed by the body.

Code changes

The configuration filedefaultConfig.js

/ / configuration need compressed file type compress: / \. | | js | md CSS (HTML) /Copy the code

Core code ~ header/ compresse.js

const { createGzip, createDeflate } = require('zlib'/** * @exports = (rs, req, / module. Exports = (rs, req, / module. Exports) Res) => {const acceptEncoding = req.headers['accept-encoding'] / / tentative support gzip compression | deflate using the built-in zlib compression algorithmif(! acceptEncoding || ! acceptEncoding.match(/\b(gzip|deflate)\b/)) {return rs
  } else if(acceptencoden.match (/ bgzip /)) {// Tell the browser how to compress res.setheader ('Content-Encoding'.'gzip'// Use the pipe methodreturn rs.pipe(createGzip())
  } else if (acceptEncoding.match(/\bdeflate\b/)) {
    res.setHeader('Content-Encoding'.'deflate')
    return rs.pipe(createDeflate())
  }
}

Copy the code

Route File Modification

However and soft, to step on the pit

At this time found that click on the relevant project reported the following error

This means the request header is not allowed to be set again

correction

Now you need to merge the request header Settings into one

  • Unset the request header here
  • Receive parameters and set the request header uniformly

Obvious effects

As you can see, the original file size is 4.8K and the request time is 20ms

Do not compress the file 1.7K, request time 3ms

close