gatsby-plugin-zopfli

Gatsby plugin for preparing zopfli-compressed gzip versions of assets.

The Zopfli Compression Algorithm is a new, open sourced data compression library. It creates a smaller output size, typically 3–8% smaller compared to zlib at maximum compression

The compression method is best suited for static web content, files that don't change that often and that generate a lot of traffic. That's because Zopfli uses two to three times more CPU time than zlib at maximum quality.

Files compressed with Zopfli can be decompressed with existing methods on the client and there will be no performance penalty at this end.

/webpack-runtime-cde5506958f1afc4d89e.js

becomes

/webpack-runtime-cde5506958f1afc4d89e.js.gz

Requirements

This plugin wil only generate the compressed files. To see them been served to the client, your Gatsby website should run on a production server that supports GZip. The Gatsby development server does not serve the compressed versions.

Installation

With npm:

npm install --save gatsby-plugin-zopfli

Or with Yarn:

yarn add gatsby-plugin-zopfli

Usage

In your gatsby-config.js file add:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-zopfli'
    }
  ]
}

By default, only .css and .js files are compressed, but you can override this with the extensions option.

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-zopfli',
      options: {
        extensions: ['css', 'html', 'js', 'svg']
      }
    }
  ]
}

You can even place all the zopfli-compressed files in a dedicated directory (ex. public/zopfli):

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-zopfli',
      options: {
        path: 'zopfli'
      }
    }
  ]
}

To customize compression, you can add optional parameters to the zopfli library: (see here for details on various options)

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-zopfli',
      options: {
        path: 'zopfli',
        compression: {
          numiterations: 25
        }
      }
    }
  ]
}

For diagnostic information, you can enable verbose logging:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-zopfli',
      options: {
        verbose: true
      }
    }
  ]
}

Maintainers

Osmond van Hemert

Contributing

If you would like to help out with some code, check the details.

Not a coder, but still want to support? Have a look at the options available to donate.

Sponsors

License

Licensed under MIT.

NOTE: This plugin only generates output when run in production mode!