Necesito ayuda para depurar el complemento de compresión de Webpack.

RESUMEN DEL PROBLEMA

• El objetivo es habilitar la compresión de activos y reducir el tamaño del paquete de mi aplicación. Usar el algoritmo Brotli como predeterminado y gzip como respaldo para navegadores no compatibles.
• Esperaba un campo de codificación de contenido dentro de los encabezados de respuesta de un recurso. En cambio, se cargan sin el campo. Utilicé la pestaña de red de las herramientas de desarrollo de Chrome para confirmar esto. Para el contexto, vea el siguiente fragmento:
• No se muestran errores en mi navegador o IDE cuando se ejecuta localmente.

LO QUE INTENTÉ

• Usando diferentes implementaciones para el complemento de compresión. Consulte la siguiente lista de enfoques:
  1. (Con la API de la cadena Webpack)

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

2. (Con la API de la cadena Webpack)

 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 }])

3. (Con la API de la cadena Webpack)

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

4. (Usando vue-cli-plugin: compresión) Esto falla debido a un error de generador faltante cuando uso vue invoke compression en respuesta a un mensaje de la consola IDE después de ejecutar vue add compression como alternativa al uso de Webpack Chain API para la configuración de compresión.

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

5. Por último, intenté establecer el campo de umbral en 0 y aumentarlo a más de 10k bytes.

PUNTOS DE SIGNIFICADO

• Los intentos anteriores no lograron el objetivo que establecí en la primera viñeta de resumen y se usaron en lugar de los enfoques probados anteriormente.
• Prioricé mis esfuerzos con Webpack Chain API ya que no produjo errores al reconstruir y ejecutar la aplicación.

ENLACES/DOCUMENTOS REFERENCIADOS

• 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 (problema de generador similar con otro complemento)
• https://webpack.js.org/plugins/compression-webpack-plugin/
• Use webpack-chain para hacer la configuración de webpack en vue.config.js, entonces, ¿cómo usar el complemento speed-measure-webpack-plugin? (no es una respuesta válida, pero no obstante se hace referencia a la sintaxis)
• https://github.com/vuejs/vue-cli/issues/6091#issuecomment-738536334
• Webpack prerender-spa-plugin con compresión-webpack-plugin. index.html no comprimido

CÓDIGO

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

paquete.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" }

Agradezco todos los aportes. Gracias.