Compression Preset

The official wingsuit compression preset adds support for gzip and brotli compression of your css, js & html files.

Installing the compression preset

We recommend using this preset if your CMS does not support aggreation and compression. In order to do so, you'll want to install the preset as a dev-dependency via yarn or npm:

yarn add @wingsuit-designsystem/preset-compression -D

After that, you'll need wingsuit to consume the preset by loading it via your wingsuit.config.js:

const namespaces = require('./source/default/namespaces');

module.exports = {
  presets: [
    '@wingsuit-designsystem/preset-compression',
  ],
  designSystems: {
    default: {
      namespaces,
    },
  },
};

Default behavior & customizations

The default behavior compresses your css, js & html files with both gzip and brotli algorithm only when the build process is executed. The following properties, however, are exposed and can be altered by using the parameters object within your wingsuit.config.js:

PropTypeDesc
compression{Compression.type 0=Brotli, 1=gzip | default: 0}use gzip or brotli compression algorithm/function
fileName{string | default: '[path][base]'}target asset filename see for more information. wingsuit replaces js, css and js files with the compressed one. Add file extension here if you want seperate files.

Example configuration:

const namespaces = require('./source/default/namespaces');

module.exports = {
  presets: ['@wingsuit-designsystem/preset-compression'],
  parameters: {
    compression: {
      compression: 0, // 1 for gzip
      fileName: '[path][base][file].br',
    },
  },
  designSystems: {
    default: {
      namespaces,
    },
  },
};
NEXT
Imagemin Preset
Optimize your images and create webp variants of them on the fly.
PWA Preset
Let wingsuit generate all your favicons and a manifest.json for pwa enhancements for you.