vue项目打包优化--gzip压缩

最近在打包vue项目时，发现使用默认配置，打出来的包体积非常大。而且，在项目部署后，服务器上的资源文件请求都会保持原本大小。文件过大，会导致网络请求耗时，严重点可能阻塞后面的进程。

为了解决以上问题，使用了gzip压缩技术来进行优化。

gzip压缩技术，可以把CSS、 JS、 HTML、 JSON等文本文件中的空格和换行符给删除掉，从而缩小文件体积，以达到提升网站访问速度的目的。如果文件是二进制，使用gzip压缩则没有效果。当然gzip压缩也有缺点，那就是会消耗一部分CPU性能，但相比于压缩后减少一半以上的体积来说，这点CPU性能损耗是完全值得的。

下面是完整使用步骤：

1.安装compression-webpack-plugin

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

2.修改配置文件vue.config.js

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css|html|jpg|jpeg|png|svg)?$/i, // 需要压缩的文件类型
        filename: "[path].gz[query]", // 压缩后的文件名
        algorithm: "gzip", // 使用gzip压缩
        threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩
        //minRatio: 0.8, // 压缩率小于1才会压缩
        deleteOriginalAssets: true, // 是否删除原文件
      }),
    ],
  },
};

3.重新打包，发现体积明显减少，文件中有 .gz的文件。

4. 打包后的项目直接部署，会报错404，需要修改nginx配置文件才可正常使用。

    gzip_static on;          #对静态文件进行gzip压缩, 是用来配合gzip_types来使用, 单独使用无效          
    gzip_min_length  1k;     #启用gzip压缩的最小文件，小于设置值的文件将不会压缩      
    gzip_buffers     4 32k;  #设置压缩所需要的缓冲区大小，‘4 32k’表示以32k*4 的空间    
    gzip_http_version 1.1;   #设置gzip压缩针对的HTTP协议版本，早期的浏览器不支持gzip压缩 
    gzip_comp_level 2;       #gzip压缩级别（1~9），级别越小压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大
    gzip_types               #进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到
        text/plain
        application/javascript
        application/x-javascript
        text/javascript
        text/css
        text/xml
        application/xhtml+xml
        application/xml
        application/atom+xml
        application/rdf+xml
        application/rss+xml
        application/geo+json
        application/json
        application/ld+json
        application/manifest+json
        application/x-web-app-manifest+json
        image/svg+xml
        text/x-cross-domain-policy;            
    gzip_vary on;                   #是否在http header中添加Vary: Accept-Encoding，建议开启       
    gzip_disable   "MSIE [1-6]\.";  #对IE6和以下的浏览器不开启gzip压缩, 因为IE6以前的浏览器不支持gzip

（Nginx实现资源压缩的原理是通过ngx_http_gzip_module模块拦截请求，并对需要做gzip的类型做gzip，ngx_http_gzip_module是Nginx默认集成的，不需要重新编译，直接开启即可）

5.重启nginx

nginx -s reload

6.访问项目，发现有压缩信息，且项目可正常访问。