Compress Assets - rvdegroen/notes GitHub Wiki

Table of Contents

My, Roshnie de Groen, topic is: Compress assets that get send to the client.

What is Compression of Assets?

Compression allows you to reduce the size of your application by removing unnecessary data in your application. You can use the compression middleware for Express or you can use a compression library. The middleware compression makes the response smaller of the HTTP request and the compression libraries make actual data smaller. To be able to use these libraries, you will need to make your own middleware. I'm using the compression middleware, because our app is not that big. I also found the documentation on express easier for me to understand than trying to make my own middleware and with the deadline in sight, I wanted to use this kind of form so the application would be done in time. For now I'll talk about the compression middleware.

Compression is a middleware and automatically reduces the size of assets contained in the HTTP response. This middleware uses zLib by default. You can use different options to compress your application further. I will explain these options later.

Source: http://expressjs.com/en/resources/middleware/compression.html

Why Would you Use Compression?

The bigger your application is in size, the more memory it costs for your device. On bigger websites this can be an issue, because then you will also have to take the bandwidth into account. Bandwidth is the volume or the amount of data that can be sent over a connection. If you want your visitors to be able to use your application, your application needs to be able to handle it. You normally have to pay for a certain badwidth if you have a website on the internet. This means that if your application is smaller, then you can have a higher amount of max visitors on your websites and this is why you would want to use compression.

source: https://www.verizon.com/info/definitions/bandwidth/

How do you use Compression?

You basically only need a few lines in your project. Here below you can find the lines you will need in your code to compress your application.

  • npm install compression = to install compression
  • const compression = require('compression') = to require compression in your project
  • app.use(compression({OPTIONS})) = to use the compression middleware in your project (with or without options)

Options for Compression

Like I said earlier, you have different options that you can use to compress your application further. You can set the following options:

  • ChunkSize = the default value is 16384 or zlib.Z_DEFAULT_CHUNK
  • Filter = "A function to decide if the response should be considered for compression", this way you can choose manually when to compress or not (http://expressjs.com/en/resources/middleware/compression.html)
  • Level = Can be used as integer in a range of 0 (no compression) and 9 (max compression) The level for zlib compression to apply to responses. The default value is -1 (equivalent to 6) or Z_DEFAULT_COMPRESSION
  • MemLevel = Is an integer between 1 and 9 and specifies how much memory should be allocated for the internal compression. The default value is 8 or zlib.Z_DEFAULT_MEMLEVEL
  • Strategy = Used to "tune" compression algorithm. You can use for example: zlib.Z_DEFAULT_STRATEGY for normal data, zlib.Z_HUFFMAN_ONLY for better compression of PNG image data
  • Threshold = "Byte threshold for the response of the body size before the compression is considered for the response" (http://expressjs.com/en/resources/middleware/compression.html)
  • WindowBits = The default value is 15 or zlib.Z_DEFAULT_WINDOWBITS
  • .Filter = used to make your own filter instead of the default function

For more information on the usage of the options, you can go to: https://nodejs.org/api/zlib.html#zlib_memory_usage_tuning

source: http://expressjs.com/en/resources/middleware/compression.html