使用vue打包时gzip压缩的两种方案

下面给出两种使用vue打包gzip压缩的方案：

1. 使用webpack插件

vue-cli3已经默认安装好了webpack，并且支持gzip压缩。可以在项目的vue.config.js文件中添加如下配置：

module.exports = {
  chainWebpack: config => {
    // 开启gzip压缩
    config
      .plugin('compressionPlugin')
      .use(require('compression-webpack-plugin'), [{
        algorithm: 'gzip', // 使用gzip压缩
        test: /\.js$|\.html$|\.css$/, // 匹配文件名
        threshold: 10240, // 超过10k进行压缩
        deleteOriginalAssets: false, // 不删除源文件
        minRatio: 0.8 // 压缩比例达到0.8时进行压缩
      }])
  }
}

上述代码中，我们借助了一个压缩插件compression-webpack-plugin，具体用法如下：

• algorithm：压缩算法，可以取值'deflate'或'gzip'；
• test：匹配需要压缩的文件，支持正则表达式；
• threshold：仅处理大于该大小的文件，单位为字节；
• deleteOriginalAssets：是否删除源文件；
• minRatio：压缩率达到该比例才会处理。

这种方式比较简单，但是需要手动配置各种参数。

2. 使用服务器Nginx自动压缩

另一种方案就是使用Nginx的gzip模块，在服务器上自动压缩静态资源。具体配置如下：

在Nginx的配置文件nginx.conf中添加以下配置：

http {
  gzip on; # 打开gzip压缩
  gzip_types text/plain application/xhtml+xml text/css application/xml text/javascript application/javascript application/json; # 压缩类型
  gzip_min_length 1024; # 文件超过1k进行压缩
  gzip_vary on; # 不同代理（浏览器）使用相同的缓存
  gzip_proxied expired no-cache no-store private auth; # 定义代理服务器的缓存策略
  gzip_comp_level 6; # 压缩级别，1-9
  gzip_buffers 16 8k; # 压缩缓存
}

这里只列出了核心配置项，具体的nginx.conf文件需要根据自己的需求进行调整。

示例代码：

例如，我们在服务器上部署一个名叫myapp的vue应用，我们把打包好的静态文件放在/srv/http/myapp/dist目录下。

那么，在Nginx配置文件中，我们可以添加一个server段来启动myapp应用，并使用gzip压缩：

server {
  listen 80;
  server_name your_domain.com;
  root /srv/http/myapp/dist; # myapp应用的根目录（打包好的静态文件所在目录）

  # gzip压缩配置
  gzip on;
  gzip_types text/plain application/xhtml+xml text/css application/xml text/javascript application/javascript application/json; 
  gzip_min_length 1024; 
  gzip_vary on;
  gzip_proxied expired no-cache no-store private auth; 
  gzip_comp_level 6; 
  gzip_buffers 16 8k;

  # 其他配置
  location / {
    try_files $uri $uri/ /index.html;
  }
}

上述Nginx配置文件中，我们启动了一个名为myapp的vue应用，并且启用了gzip压缩。

总的来说，使用Nginx的gzip模块自动压缩静态资源是更加方便的方式，但是需要一定Nginx的使用经验。而使用webpack插件进行压缩则需要手动配置各种参数，适用于对压缩算法有特殊要求的用户。