Which is Better Web Compression Middleware?
serve-static vs compression vs compression-webpack-plugin vs express-static-gzip
1 Year
serve-staticcompressioncompression-webpack-pluginexpress-static-gzipSimilar Packages:
What's Web Compression Middleware?

Web compression middleware packages are designed to optimize the delivery of web content by reducing the size of the data sent over the network. These packages help improve load times and reduce bandwidth usage by compressing responses before they are sent to the client. Each package serves a specific purpose and is tailored for different use cases, from server-side compression to build-time optimizations in web applications.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
serve-static34,437,2571,39525.4 kB14a month agoMIT
compression17,983,2772,76123.3 kB33-MIT
compression-webpack-plugin1,228,8061,41037.1 kB57 months agoMIT
express-static-gzip100,63614524.3 kB3a month agoMIT
Feature Comparison: serve-static vs compression vs compression-webpack-plugin vs express-static-gzip

Compression Method

  • serve-static: Does not perform compression but serves static files from a specified directory. It is a straightforward middleware that allows you to specify options like caching and content type, making it essential for serving assets like images, CSS, and JavaScript.
  • compression: Utilizes Gzip compression for HTTP responses, reducing payload size dynamically based on the request headers and client capabilities. It supports various options to control the compression level and can be easily integrated into existing Express applications.
  • compression-webpack-plugin: Integrates with Webpack to compress assets during the build process using Gzip or Brotli. This plugin allows configuration of compression options and can be set to only compress files that exceed a certain size, optimizing the build output for production.
  • express-static-gzip: Serves pre-compressed Gzip files directly from the server, improving response times by eliminating the need for on-the-fly compression. It checks for the existence of compressed files and serves them if available, ensuring clients receive the fastest response possible.

Use Case

  • serve-static: Best for serving static files without any compression. It is useful for applications that do not require compression or where compression is handled by other means.
  • compression: Best suited for applications where dynamic content is generated and needs to be compressed on-the-fly. Ideal for APIs and web applications that serve varying content based on user requests.
  • compression-webpack-plugin: Perfect for front-end projects using Webpack where you want to optimize the size of your bundled assets before deployment. It is particularly useful for applications with large JavaScript and CSS files that benefit from compression.
  • express-static-gzip: Ideal for serving static assets that have been pre-compressed, such as images, stylesheets, and scripts. This package is beneficial for performance optimization when you have control over the asset generation process.

Integration

  • serve-static: A core middleware in Express.js that serves static files from a directory. It is straightforward to use and can be combined with other middleware for enhanced functionality.
  • compression: Easily integrates into Express.js applications as middleware, allowing for seamless addition to existing routes and configurations. It requires minimal setup and can be customized with various options.
  • compression-webpack-plugin: Integrates directly into the Webpack build process, making it easy to include in projects that already use Webpack for asset management. Configuration is done in the Webpack config file, allowing for fine-tuning of compression settings.
  • express-static-gzip: Works as middleware in Express.js, complementing existing static file serving capabilities. It requires pre-compressed files to be available and integrates smoothly with the Express static file serving mechanism.

Performance Impact

  • serve-static: Provides a straightforward way to serve files without compression, which can be faster for serving uncompressed assets. However, it does not provide the performance benefits of reduced file sizes that come with compression.
  • compression: Significantly improves performance by reducing the size of HTTP responses, leading to faster load times and reduced bandwidth usage. However, it may introduce a slight CPU overhead for compression, which is generally outweighed by the benefits.
  • compression-webpack-plugin: Reduces the size of assets before they are served, leading to faster downloads for users. The performance impact is primarily during the build process, which can increase build times but results in smaller file sizes for deployment.
  • express-static-gzip: Enhances performance by serving pre-compressed files, leading to faster response times since the server does not need to perform compression on-the-fly. This results in lower CPU usage and quicker delivery of static assets.

Configuration Options

  • serve-static: Includes options for setting cache control headers, customizing the root directory for serving files, and enabling or disabling directory listing. It is straightforward but lacks advanced features like compression.
  • compression: Offers various configuration options, including the ability to set compression thresholds, customize the compression algorithm, and control the response headers. This flexibility allows developers to tailor the middleware to their specific needs.
  • compression-webpack-plugin: Highly configurable, allowing options for the compression algorithm, file types to compress, and output directory. Developers can fine-tune settings to optimize their build process based on project requirements.
  • express-static-gzip: Provides options for serving compressed files, including cache control and fallback mechanisms if compressed files are not available. This ensures a robust serving strategy for static assets.
How to Choose: serve-static vs compression vs compression-webpack-plugin vs express-static-gzip
  • serve-static: Use 'serve-static' when you need a simple middleware to serve static files in an Express application. It does not provide compression out of the box, but it is essential for serving files from a directory and can be combined with other middleware for compression.
  • compression: Choose 'compression' if you need a middleware for Express.js applications that automatically compresses HTTP responses. It is suitable for server-side applications where you want to enhance performance by reducing response sizes dynamically.
  • compression-webpack-plugin: Opt for 'compression-webpack-plugin' if you are using Webpack to bundle your front-end assets and want to compress those assets during the build process. This is ideal for optimizing static files before they are served, ensuring that your users download smaller files from the start.
  • express-static-gzip: Select 'express-static-gzip' if you want to serve pre-compressed Gzip files for static assets in an Express application. This package is useful when you have already compressed your assets and want to serve them efficiently without additional processing overhead.
README for serve-static

serve-static

NPM Version NPM Downloads Linux Build Windows Build Test Coverage

Install

This is a Node.js module available through the npm registry. Installation is done using the npm install command:

$ npm install serve-static

API

var serveStatic = require('serve-static')

serveStatic(root, options)

Create a new middleware function to serve files from within a given root directory. The file to serve will be determined by combining req.url with the provided root directory. When a file is not found, instead of sending a 404 response, this module will instead call next() to move on to the next middleware, allowing for stacking and fall-backs.

Options

acceptRanges

Enable or disable accepting ranged requests, defaults to true. Disabling this will not send Accept-Ranges and ignore the contents of the Range request header.

cacheControl

Enable or disable setting Cache-Control response header, defaults to true. Disabling this will ignore the immutable and maxAge options.

dotfiles

Set how "dotfiles" are treated when encountered. A dotfile is a file or directory that begins with a dot ("."). Note this check is done on the path itself without checking if the path actually exists on the disk. If root is specified, only the dotfiles above the root are checked (i.e. the root itself can be within a dotfile when set to "deny").

  • 'allow' No special treatment for dotfiles.
  • 'deny' Deny a request for a dotfile and 403/next().
  • 'ignore' Pretend like the dotfile does not exist and 404/next().

The default value is similar to 'ignore', with the exception that this default will not ignore the files within a directory that begins with a dot.

etag

Enable or disable etag generation, defaults to true.

extensions

Set file extension fallbacks. When set, if a file is not found, the given extensions will be added to the file name and search for. The first that exists will be served. Example: ['html', 'htm'].

The default value is false.

fallthrough

Set the middleware to have client errors fall-through as just unhandled requests, otherwise forward a client error. The difference is that client errors like a bad request or a request to a non-existent file will cause this middleware to simply next() to your next middleware when this value is true. When this value is false, these errors (even 404s), will invoke next(err).

Typically true is desired such that multiple physical directories can be mapped to the same web address or for routes to fill in non-existent files.

The value false can be used if this middleware is mounted at a path that is designed to be strictly a single file system directory, which allows for short-circuiting 404s for less overhead. This middleware will also reply to all methods.

The default value is true.

immutable

Enable or disable the immutable directive in the Cache-Control response header, defaults to false. If set to true, the maxAge option should also be specified to enable caching. The immutable directive will prevent supported clients from making conditional requests during the life of the maxAge option to check if the file has changed.

index

By default this module will send "index.html" files in response to a request on a directory. To disable this set false or to supply a new index pass a string or an array in preferred order.

lastModified

Enable or disable Last-Modified header, defaults to true. Uses the file system's last modified value.

maxAge

Provide a max-age in milliseconds for http caching, defaults to 0. This can also be a string accepted by the ms module.

redirect

Redirect to trailing "/" when the pathname is a dir. Defaults to true.

setHeaders

Function to set custom headers on response. Alterations to the headers need to occur synchronously. The function is called as fn(res, path, stat), where the arguments are:

  • res the response object
  • path the file path that is being sent
  • stat the stat object of the file that is being sent

Examples

Serve files with vanilla node.js http server

var finalhandler = require('finalhandler')
var http = require('http')
var serveStatic = require('serve-static')

// Serve up public/ftp folder
var serve = serveStatic('public/ftp', { index: ['index.html', 'index.htm'] })

// Create server
var server = http.createServer(function onRequest (req, res) {
  serve(req, res, finalhandler(req, res))
})

// Listen
server.listen(3000)

Serve all files as downloads

var contentDisposition = require('content-disposition')
var finalhandler = require('finalhandler')
var http = require('http')
var serveStatic = require('serve-static')

// Serve up public/ftp folder
var serve = serveStatic('public/ftp', {
  index: false,
  setHeaders: setHeaders
})

// Set header to force download
function setHeaders (res, path) {
  res.setHeader('Content-Disposition', contentDisposition(path))
}

// Create server
var server = http.createServer(function onRequest (req, res) {
  serve(req, res, finalhandler(req, res))
})

// Listen
server.listen(3000)

Serving using express

Simple

This is a simple example of using Express.

var express = require('express')
var serveStatic = require('serve-static')

var app = express()

app.use(serveStatic('public/ftp', { index: ['default.html', 'default.htm'] }))
app.listen(3000)

Multiple roots

This example shows a simple way to search through multiple directories. Files are searched for in public-optimized/ first, then public/ second as a fallback.

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')

var app = express()

app.use(serveStatic(path.join(__dirname, 'public-optimized')))
app.use(serveStatic(path.join(__dirname, 'public')))
app.listen(3000)

Different settings for paths

This example shows how to set a different max age depending on the served file type. In this example, HTML files are not cached, while everything else is for 1 day.

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')

var app = express()

app.use(serveStatic(path.join(__dirname, 'public'), {
  maxAge: '1d',
  setHeaders: setCustomCacheControl
}))

app.listen(3000)

function setCustomCacheControl (res, path) {
  if (serveStatic.mime.lookup(path) === 'text/html') {
    // Custom Cache-Control for HTML files
    res.setHeader('Cache-Control', 'public, max-age=0')
  }
}

License

MIT