前端VUE项目使用gzip压缩打包

前端VUE项目使用gzip压缩打包

1. 安装compression-webpack-plugin包

npm i compression-webpack-plugin

由于脚手架版本兼容问题，直接安装最新版可能会导致报错

TypeError: Cannot read property ‘tapPromise’ of undefined

我这里vue cli是4.5.0版本，所以安装的是6.1.1版本

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

2. 修改vue.config.js文件

在vue.config.js文件中添加以下代码，和gizp压缩无关的代码这里已去除

//打包压缩优化
const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
// const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  configureWebpack:{
    resolve:{
      alias:{
        '@':path.resolve(__dirname, './src'),
        '@i':path.resolve(__dirname, './src/assets'),
      }
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

      // 下面是下载的插件的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100
      })
    ]
  }
}

3. 修改nginx配置，我的项目是通过nginx代理的，所以修改nginx的配置文件即可

在server里添加以下代码，与listen同级

gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
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 on;
gzip_disable "MSIE [1-6]\.";

4. 做完前两步操作后，运行打包命令 npm run build ，可以看到生成的dist文件夹中的JS和CSS文件多出了同名.gz文件。

5. 打包后上传服务器查看效果，可以发现有明显的压缩。

注：开发环境下，无法查看压缩效果