1、安装插件

webpack 在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：

npm i -D compression-webpack-plugin

若打包报如下错误：

这是由于脚手架目前最新只支持到了v6.1.1版本，所以降低版本后即可，例如安装下 6.1.1这个版本即可：

npm install compression-webpack-plugin@6.1.1 --save-dev

2、在 vue.config.js 文件中进行配置

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css/, //匹配文件名
            threshold: 10240,//对超过10k的数据压缩
            deleteOriginalAssets: false //不删除源文件
          })
        ]
      }
    }
  }
}

3、打包后的示例

注意

要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。

下面以 Nginx 为例：在 nginx.conf 中添加如下配置

http {
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";
}