'Vuejs Webpack Compression Plugin not compressing

I need help debugging Webpack's Compression Plugin.

SUMMARY OF PROBLEM

Goal is to enable asset compression and reduce my app's bundle size. Using the Brotli algorithm as the default, and gzip as a fallback for unsupported browsers.
I expected a content-encoding field within an asset's Response Headers. Instead, they're loaded without the field. I used the Chrome dev tools' network tab to confirm this. For context, see the following snippet:
No errors show in my browser or IDE when running locally.

WHAT I TRIED

Using different implementations for the compression plugin. See below list of approaches:
1. (With Webpack Chain API)

config
 .plugin('brotliCompress')
     .use(CompressionWebpackPlugin, [{
       exclude: /.map$/,
       cache: true,
       algorithm: 'brotliCompress',
       test: /\.(js|css|html|svg)$/,
       threshold: 10240,
       minRatio: 0.8,
     }])

(With Webpack Chain API)

config
  .plugin('gzip')
      .use(CompressionWebpackPlugin, [{
        algorithm: 'gzip',
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
        threshold: 8192, // Assets larger than 8192 bytes are not processed
        minRatio: 0.8, // Assets compressing worse that this ratio are not processed
      }])

(With Webpack Chain API)

config
  .plugin('CompressionPlugin')
      .use(CompressionWebpackPlugin)

(Using vue-cli-plugin: compression) This fails due to a Missing generator error when I use vue invoke compression in response to an IDE console message after I run vue add compression as an alternative to using Webpack Chain API for compression configuration.

  pluginOptions: {
    compression: {
      brotli: {
        filename: '[file].br[query]',
        algorithm: 'brotliCompress',
        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
        minRatio: 0.8,
      },
      gzip: {
        filename: '[file].gz[query]',
        algorithm: 'gzip',
        include: /\.(js|css|html|svg|json)(\?.*)?$/i,
        minRatio: 0.8
      }
    }
  },

Lastly, I tried setting the threshold field to 0 as well as raising it larger than 10k bytes.

POINTS OF SIGNIFICANCE

The above attempts didn't achieve the goal I stated in the first summary bullet and were used in place of the previous approaches tested.
I prioritized my efforts with Webpack Chain API since it resulted in no errors when rebuilding and running the app.

REFERENCED LINKS/DOCS

https://webpack.js.org/plugins/compression-webpack-plugin/
https://github.com/neutrinojs/webpack-chain/tree/main
https://neutrinojs.org/webpack-chain/#config-plugins-adding
https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/500 (similar generator issue with another plugin)
https://webpack.js.org/plugins/compression-webpack-plugin/
Use webpack-chain to do webpack configuration in vue.config.js, so how to use speed-measure-webpack-plugin plugin? (not a valid answer, but referenced syntax nonetheless)
https://github.com/vuejs/vue-cli/issues/6091#issuecomment-738536334
Webpack prerender-spa-plugin with compression-webpack-plugin. index.html not compressed

CODE

vue.config.js

const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  /* ....shortened for brevity */

  // Compress option VI (with vue cli plugin, generator bug when invoked)
  // pluginOptions: {
  //   compression: {
  //     brotli: {
  //       filename: '[file].br[query]',
  //       algorithm: 'brotliCompress',
  //       include: /\.(js|css|html|svg|json)(\?.*)?$/i,
  //       minRatio: 0.8,
  //     },
  //     gzip: {
  //       filename: '[file].gz[query]',
  //       algorithm: 'gzip',
  //       include: /\.(js|css|html|svg|json)(\?.*)?$/i,
  //       minRatio: 0.8
  //     }
  //   }
  // },

  chainWebpack: config => {
    config
      .resolve.alias
        .set('@', resolve('src'))

    config
      .plugins.delete('prefetch') 
        
    config
      .optimization.splitChunks()

    config
      .output
      .chunkFilename('[id].js')

    // The below configurations are recommeneded only in prod.
    // config.when(process.env.NODE_ENV === 'production', config => { config... })

    // Compress option VII
    // config
      // .plugin('gzip')
      // .use(CompressionWebpackPlugin, [{
      //   algorithm: 'gzip',
      //   test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
      //   threshold: 8192, // Assets larger than 8192 bytes are not processed
      //   minRatio: 0.8, // Assets compressing worse that this ratio are not processed
      // }])

    // Compress option VIII
    // config
      // .plugin('CompressionPlugin')
      // .use(CompressionWebpackPlugin)

    config
      .plugin('brotliCompress')
      .use(CompressionWebpackPlugin, [{
        exclude: /.map$/,
        // deleteOriginalAssets: true,
        cache: true,
        algorithm: 'brotliCompress',
        test: /\.(js|css|html|svg)$/,
        threshold: 10240,
        minRatio: 0.8,
      }])
  },
}

package.json

"dependencies": {
    "@auth0/auth0-spa-js": "^1.15.0",
    "audio-recorder-polyfill": "^0.4.1",
    "compression-webpack-plugin": "^6.0.0",
    "core-js": "^3.6.5",
    "dotenv": "^8.2.0",
    "dotenv-expand": "^5.1.0",
    "moment": "^2.29.1",
    "register-service-worker": "^1.7.1",
    "uuid": "^3.4.0",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.8",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-cli-plugin-compression": "~1.1.5",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.46.0"
  }

I appreciate all input. Thanks.

Solution 1:^[1]

It seems like the compression-webpack-plugin only compresses files, but it doesn't automatically configure the dev server to serve the compressed files in place of the original file.

However, you can manually setup a middleware via vue.config.js's devServer option (passed through to webpack-dev-server) to do this:

Rewrite all .js requests that accept br encoding to append .br to the original URL, which matches the filename setting given to compression-webpack-plugin. This effectively fetches the .br file compressed by the plugin.
Set response headers to indicate the br content encoding and application/javascript content type so that browsers could understand how to process the file.

Vue CLI 5 (Webpack 5)

Use devServer.setupMiddlewares:

// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new CompressionPlugin({   1??
        filename: '[path][base].br',
        algorithm: 'brotliCompress',
        test: /\.js$/,
      })
    ]
  },
  devServer: {
    setupMiddlewares(middlewares, devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined')
      }

      middlewares.unshift({
        name: 'serve-brotli-js',
        path: '*.js',
        middleware: (req, res, next) => {
          if (req.get('Accept-Encoding')?.includes('br')) {
            1??
            req.url += '.br'

            2??
            res.set('Content-Encoding', 'br')
            res.set('Content-Type', 'application/javascript; charset=utf-8')
          }
          next()
        }
      })

      return middlewares
    }
  }
}

Vue CLI 4 (Webpack 4)

Use devServer.before:

Note: The only difference from Webpack 5 is the Express app is directly passed as the argument to devserver.before().

// vue.config.js
?
module.exports = {
  ?
  devServer: {
    before(app) {
      // same code as Webpack 5 above
    }
  }
}

GitHub demo

Solution 2:^[2]

It's not clear which server is serving up these assets. If it's Express, looking at the screenshot with the header X-Powered-By, https://github.com/expressjs/compression/issues/71 shows that Brotli support hasn't been added to Express yet.

There might be a way to just specify the header for content-encoding manually though.

Solution 3:^[3]

Add these in your nginx.conf file,If the client supports gzip Parsing , So as long as the server can return gzip Can be enabled gzip

gzip on; #  Turn on Gzip
gzip_static on; #  Turn on static file compression 
gzip_min_length  1k; #  Incompressible critical value , Greater than 1K It s only a matter of time 
gzip_buffers     4 16k;
gzip_comp_level 5;
gzip_types     application/javascript application/x-javascript application/xml application/xml+rss application/x-httpd-php text/plain text/javascript text/css image/jpeg image/gif image/png; #  The type of file to be compressed 
gzip_http_version 1.1;
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	wegry
Solution 3	Joel

'Vuejs Webpack Compression Plugin not compressing

Solution 1:[1]

Vue CLI 5 (Webpack 5)

Vue CLI 4 (Webpack 4)

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]