Skip to content

Instantly share code, notes, and snippets.

@mccabiles
Created September 17, 2019 11:24
Show Gist options
  • Save mccabiles/b6306f6f25d3f54e1dad204aac085441 to your computer and use it in GitHub Desktop.
Save mccabiles/b6306f6f25d3f54e1dad204aac085441 to your computer and use it in GitHub Desktop.
Using gzip with Nginx and Vue CLI project
...
gzip on;
gzip_static on;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_proxied any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
...
// In vue.config.js:
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
],
},
};
@Unzeabk
Copy link

Unzeabk commented May 6, 2021

awesome

@AlexanderKozhevin
Copy link

 ERROR  TypeError: Cannot read property 'tapPromise' of undefined

Which version did you use?

@kid1412621
Copy link

 ERROR  TypeError: Cannot read property 'tapPromise' of undefined

Which version did you use?

Most likely the plugin version doesn't match Webpack version

@guyzyl
Copy link

guyzyl commented Nov 9, 2021

The line filename: '[path].gz[query]', no longer works, file names come out as .gz.
Should be replaced with filename: '[file].gz[query]',.

@davidyuk
Copy link

in my case was needed to add application/javascript to gzip_types

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment