Vue-cli: productionGzip in vue cli 3.0

[lzp4ever]

What problem does this feature solve?

no productionGzip config after cli 3.0, would it be add?

What does the proposed API look like?

productionGzip: on

[yyx990803]

Probably no, as most static servers have gzip capabilities. You can easily add this yourself using vue.config.js -> configureWebpack + compression-webpack-plugin.

[realeve]

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                asset: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            })
        ]
    }

[nearzeno]

@realeve 我试了，但是没有将.gz文件注入进index.html，不知道有什么好的方法吗?

[realeve]

@AloneWeb .gzip文件不是注入index.html的。

在服务端没有开启gzip的情况下，读取一个js/css文件，如果存在其.gzip版本则服务器优先返回压缩的文件，前台拿到后在浏览器层面解压。
但就像 evan you说的那样，目前大多数服务器都开启了gzip功能，文件会自动压缩，这个你在前台的网络面板里面能够看到。

我这里开gzip纯粹是为了看一下文件实际传输大小是多大，尽可能优化体积，同时服务端也是把gzip默认华人打开了的。

[nearzeno]

@realeve 懂了，非常感谢大佬的解答 👍

[RehanSaeed]

To do this right and optimally, there is more code to this than I would care to maintain. Would appreciate if this was built into Vue CLI 3. Ideally, you'd support Zopfli for better GZIP compression and Brotli too which requires three dependencies alltogether.

const BrotliPlugin = require("brotli-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const zopfli = require("@gfx/zopfli");

let plugins = [];
if (process.env.NODE_ENV === "production") {
  const compressionTest = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
  plugins = [
    new CompressionPlugin({
      algorithm(input, compressionOptions, callback) {
        return zopfli.gzip(input, compressionOptions, callback);
      },
      compressionOptions: {
        numiterations: 15
      },
      minRatio: 0.99,
      test: compressionTest
    }),
    new BrotliPlugin({
      test: compressionTest,
      minRatio: 0.99
    })
  ];
}

module.exports = {
  configureWebpack: {
    plugins
  },
  // ...omitted
}

[ayizhi]

Not success at begining，found that compression-webpack-plugin option “asset” has been changed to “filename” at last version 2.0.0，For avoiding confusion

[gefangshuai]

@ayizhi Thank you very much !

[magicdawn]

For any one using this https://github.com/vuejs/vue-cli/issues/978#issuecomment-413123933
when u met unknown option error, use this

$ npm i -D compression-webpack-plugin@1

[AccessViolator]

With node 11.7.0+ compression-webpack-plugin has native support for brotli
https://github.com/webpack-contrib/compression-webpack-plugin#using-brotli