Vuejs 웹 팩 압축 플러그인이 압축되지 않음

Vuejs 웹 팩 압축 플러그인이 압축되지 않음

웹 팩의 압축 플러그인 디버깅에 도움이 필요합니다.

문제의 개요

• 목표는 자산 압축을 활성화하고 앱 번들 크기를 줄이는 것입니다.디폴트로 Brotli 알고리즘을 사용하고 지원되지 않는 브라우저의 폴백으로 gzip을 사용합니다.
• 자산의 응답 헤더에 내용 인코딩 필드가 있어야 합니다.대신 필드 없이 로딩됩니다.Chrome 개발 도구의 네트워크 탭을 사용하여 확인했습니다.콘텍스트에 대해서는, 다음의 스니펫을 참조해 주세요.
• 로컬에서 실행할 때 브라우저 또는 IDE에 오류가 표시되지 않습니다.

시도한 것

• 압축 플러그인에 대해 다른 구현 사용.이치노
  1. (Webpack Chain API 포함)

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

2. (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
      }])

3. (Webpack Chain API 포함)

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

4. (vue-cli-plugin 사용: 압축)사용 시 Missing generator 오류로 인해 실패함vue invoke compression 후 IDE vue add compressionWebpack Chain API 입니다.

  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. 마지막으로 임계값 필드를 0으로 설정하고 10k바이트 이상으로 올리려고 했습니다.

중요한 점

• 위의 시도는 제가 첫 번째 요약 글머리 기호에서 언급한 목표를 달성하지 못했으며 테스트된 이전 접근법 대신 사용되었습니다.
• Webpack Chain API는 앱 재구축 및 실행 시 오류가 발생하지 않기 때문에 우선 순위를 매겼습니다.

참조 링크/델 텔레폰 어드바이저

• https://webpack.js.org/plugins/compression-webpack-plugin/
• https://github.com/neutrinojs/webpack-chain/tree/main
• https://neutrinojs.org/webpack-chain/ #config-plugins-module
• https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/500 (다른 플러그인에서도 유사한 제너레이터 문제)
• https://webpack.js.org/plugins/compression-webpack-plugin/
• webpack-chain을 사용하여 vue.config.js에서 웹 팩 구성을 수행합니다.그러면 speed-measure-webpack-plugin 플러그인을 어떻게 사용할 수 있습니까?(유효한 답변은 아니지만 참조된 구문)
• https://github.com/vuejs/vue-cli/issues/6091#issuecomment-738536334
• compression-webpack-plugin이 있는 Webpack prerender-spa-plugin.index.module이 압축되지 않았습니다.

코드

vue.config.module

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

패키지.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"
  }

의견을 주셔서 감사합니다.고마워요.

마치...compression-webpack-plugin는 파일만 압축하지만 원래 파일 대신 압축된 파일을 처리하도록 개발 서버를 자동으로 구성하지는 않습니다.

단, 미들웨어를 수동으로 셋업할 수 있습니다.vue.config.js이를 위한 옵션(에 패스스루):

1. 모두 다시 쓰기.js수용하는 요구br추가할 부호화.br에 지정된 설정과 일치하는 원래 URL로 이동합니다.compression-webpack-plugin이는 효과적으로 데이터 수집을 유도합니다..br플러그인으로 압축된 파일입니다.

2. 응답 헤더를 설정하여br 콘텐츠 부호화 및application/javascript 브라우저가 파일 처리 방법을 이해할 수 있도록 콘텐츠 유형을 지정합니다.

Vue CLI 5(Webpack 5)

사용방법:

// 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: {
    onBeforeSetupMiddleware({ app }) {
      app.use('*.js', (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()
      })
    }
  }
}

Vue CLI 4(Webpack 4)

사용방법:

주의: Webpack 5와의 유일한 차이점은 Express입니다.app에 대한 인수로서 직접 전달된다.devserver.before().

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

GitHub 데모

어떤 서버가 이러한 자산을 지원하는지 명확하지 않습니다.Express의 경우 헤더가 있는 스크린샷을 보고 있습니다.X-Powered-Byhttps://github.com/expressjs/compression/issues/71 에서는 Brotli 지원이 Express에 아직 추가되지 않은 것으로 나타납니다.

헤더를 지정하는 방법이 있을 수 있습니다.content-encoding수동으로 할 수작업으로.

nginx.conf 파일에 추가합니다.클라이언트가 gzip 파싱을 지원하는 경우 서버가 gzip을 반환할 수 있는 한 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]\.";

언급URL : https://stackoverflow.com/questions/69288974/vuejs-webpack-compression-plugin-not-compressing