vue项目使用compression-webpack-plugin打包优化

前端项目越来越大，导致首页加载缓慢，了解到compression-webpack-plugin插件能够将项目代码打包压缩，如果要使用需要配合nginx达到提升网页加载速度效果。插件文档传送门

先放一波压缩前和压缩后的对比

压缩前：

压缩后：

可以看出来经过压缩后项目缩小的不是一个等级，接下来介绍插件使用

1. 安装插件

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

2. 配置vue.config.js（压缩配置可以参考官方文档，根据自己需求选择）

const CompressionWebpackPlugin = require('compression-webpack-plugin')
configureWebpack: config => {
config.plugins.push(
  new CompressionWebpackPlugin({
     filename: '[path][base].gz', //压缩后的文件名
     algorithm: 'gzip', //压缩算法/功能
     test: /\.(js|css)(\?.*)?$/i, //匹配项目文件，以js或者以css结尾的才执行压缩
     threshold: 10240, //仅处理大于此大小的资产（以字节为单位）
     minRatio: 0.8, //仅压缩比该比率更好的资产（minRatio = Compressed Size / Original Size）
     deleteOriginalAssets: true //是否删除原始文件
   }
  )
}

3. 项目打包

npm run build

nginx配置

server{
  listen xxxx;
  server_name localhost;

  gzip on; //启用nginx压缩
  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]\.";

  location /appShare {
     ...
  }
}

总体下来就是这么个流程，自己还没有测试，遇到问题再补充