【VUE】vue配置Gzip压缩

【VUE】vue配置Gzip压缩

vue cli 2.9.6

安装compression-webpack-plugin

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

vue.config.js配置Gzip压缩

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']

module.exports = {
  // 配置反向代理
  devServer: {
    proxy: {
      '/api': {
        target: 'http://172.31.120.61:8088/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}

配置Nginx

 gzip on; #开启或关闭gzip on off
 gzip_disable "msie6"; #不使用gzip IE6
 gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
 gzip_buffers 4 16k; #buffer 不用修改
 gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长
 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型 

 

vue项目开启Gzip压缩和性能优化 [亲测可用]

vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能

方法/步骤

第一步，在vue项目中安装依赖并将productionGzip改为true，开启Gzip压缩：npm install --save-dev compression-webpack-plugin

​​​​

 

第二步，运行 npm run build打包项目，这时可能会报错，提示ValidationError: Compression Plugin Invalid Options。根据官网提示，需要将CompressionWebpackPlugin的设置由asset改为filename。

​​​​

​​​​

第三步，再次运行 npm run build打包项目，这时可能会继续报错，提示TypeError: Cannot read property 'emit' of undefined。据我查证，是安装的compression-webpack-plugin依赖有问题，需要卸载compression-webpack-plugin更改安装低版本 v1.12。

​​​​

第四步，卸载当前安装的compression-webpack-plugin：npm uninstall --save-dev compression-webpack-plugin

​​​​

1. 5
   第五步，安装低版本compression-webpack-plugin：npm install --save-dev compression-webpack-plugin@1.1.2
   
   
2. 6
   第六步，再次运行 npm run build打包项目，这时将正常包vue项目，愉(ku)快(bi)的j将vue开发上线了。
   
   
3. 7
   第七步，开启 nginx 服务端 gzip性能优化。找到nginx配置文件在 http 配置里面添加如下代码，然后重启nginx服务即可。
   http:{ 
         gzip on; 
         gzip_static on;
         gzip_buffers 4 16k;
         gzip_comp_level 5;
         gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 
                    image/gif image/png;
   }
   
   
4. 8
   总结一下，vue开启gzip性能优化主要分为两部分，成功开启后将大大优化vue首页加载时长。如果这篇文章帮到了你，辛苦大哥哥大姐姐们投票、点赞、打赏支持一下，谢谢！