vue-cli-plugin-compression

vue-cli-plugin-compression

compression plugin for vue-cli

Configuration

Uses compression-webpack-plugin

By default, a brotli and gzip compression plugin are configured, which automatically compress js, css, html, svg and json files.

Installing in an Already Created Project

vue add compression

Configrations

vue-cli-plugin-compression default configuration in vue.config.js:

const zlib = require("zlib");
module.exports = {
  pluginOptions: {
    compression:{
      brotli: {
        filename: '[file].br[query]',
        algorithm: 'brotliCompress',
        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
        compressionOptions: {
          params: {
            [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
          },
        },
        minRatio: 0.8,
      },
      gzip: {
        filename: '[file].gz[query]',
        algorithm: 'gzip',
        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
        minRatio: 0.8,
      }
    }
  }
}

It is possible to extend with own compression options, e.g.

const zopfli = require('@gfx/zopfli');
module.exports = {
  pluginOptions: {
    compression:{
      zopfli: {
        compressionOptions: {
          numiterations: 15,
        },
        algorithm(input, compressionOptions, callback) {
          return zopfli.gzip(input, compressionOptions, callback);
        },
      }
    }
  }
}

Compression Webpack plugin is enabled only in production mode by default. However, this can be overridden by specifying the option modes

module.exports = {
  pluginOptions: {
    compression:{
      modes: ['development', 'production'],
     ...
    }
  }
}

Injected webpack-chain Rules

• config.plugins('brotli-compression')
• config.plugins('gzip-compression')