vue-cli3.0之配置productionGzip方式

下面是“vue-cli3.0之配置productionGzip方式”的完整攻略：

1. 安装相关依赖

npm install compression-webpack-plugin@^2.0.0 --save-dev

1. 配置vue.config.js文件

在项目根目录下找到vue.config.js文件，若没有则新建一个，将以下代码复制进去：

const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: /\.js$|\.html$|\.css/,
            threshold: 10240,
            minRatio: 0.8
          })
        ]
      }
    }
  }
}

其中，CompressionWebpackPlugin是一个webpack插件，用于对输出的文件进行gzip压缩；algorithm指定采用的压缩算法，test指定要压缩的文件类型正则匹配规则，threshold指定文件大小超过多少字节才开启压缩，minRatio指定最小的压缩比例。

1. 示例说明

2. 示例1：压缩所有静态资源

若想压缩所有静态资源（包括图片、音视频等），只需将test字段的值改为/(.*)/即可，如下所示：

const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: /(.*)/,
            threshold: 10240
          })
        ]
      }
    }
  }
}

• 示例2：压缩JS和CSS文件

若只想压缩JS和CSS文件，test字段则应该修改为以下正则表达式：/.js$|.css$/。

const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: /\.js$|\.css$/,
            threshold: 10240
          })
        ]
      }
    }
  }
}

通过以上示例，我们可以灵活地指定需要压缩的文件类型以达到最优的压缩效果。