Compress Vue.js assets on Heroku with gzip

Here’s how to compress Vue.js assets when using Heroku.

First, install compression-webpack-plugin:

$ npm install compression-webpack-plugin --save

[Note this is not using the --save-dev option, because the package will be used in production.]

Then update Vue’s configuration file to include the following settings:

// vue.config.js
const CompressionWebpackPlugin = require("compression-webpack-plugin");

module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.(js|css)$/,
      })
    ]
  }
};

Deploy to Heroku, and the new setting may be verified in browser dev tools by viewing response headers for .js and .css assets, and confirming that Content-Encoding: gzip is set.