vue项目打包开启gzip压缩

vue-cli3+ 项目开启gzip压缩

1. 安装compression-webpack-plugin插件(可装1.1.12版本，部分版本打包会报错)

npm install compression-webpack-plugin

2. vue.config.js文件中加入以下指定代码

const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
    configureWebpack: config =>{
        if (process.env.NODE_ENV === 'production'){
            return {
                plugins: [
                    new CompressionWebpackPlugin({
                        filename: '[path].gz[query]',
                        algorithm: 'gzip',
                        test: productionGzipExtensions,
                        threshold: 2048,
                        minRatio: 0.8
                    })
                ]
            }
        }
    }
};

到此打包配置完成，需要在nginx中开启gzip压缩，查看宝塔面板开启gzip教程

非vue-cli项目开启gzip压缩

1. 安装compression-webpack-plugin插件(可装1.1.12版本，部分版本打包会报错)

npm install compression-webpack-plugin

2. 在config目录下的index.js文件中将productionGzip改为true
   
3. 在webpack.base.conf.js文件中加入以下代码

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

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

到此打包配置完成，需要在nginx中开启gzip压缩，查看宝塔面板开启gzip教程