vcp

vue-cli-plugin-compression

Prepare compressed versions of assets to serve them with Content-Encoding

Showing:

Popularity

Downloads/wk

2.6K

GitHub Stars

7

Maintenance

Last Commit

14d ago

Contributors

2

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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:

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);
        },
      }
    }
  }
}

Injected webpack-chain Rules

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100