【vue深入】项目打包之gzip压缩，减少体积，提升响应速度小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作

小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

前言

佛祖保佑，永无bug。Hello 大家好！我是海的对岸！

我们项目做得熟练了，Vue也用的熟悉了，我们就会想着扩展。性能优化就是一个不错的方向

这次我们讨论下gzip

这次是测试那边反应，说有个数据网络请求速度有点慢，让我优化一下

解决过程

1. 看看事故现场

2. 使用`compression-webpack-plugin`

安装compression-webpack-plugin

npm install --save-dev compression-webpack-plugin
或
yarn add compression-webpack-plugin -D

ps：

这里还有一个小坑，默认安装的compression-webpack-plugin版本是^7.1.2，实际使用的时候报一个错Cannot read property 'tapPromise' of undefined
解决方法就是安装一个低版本的compression-webpack-plugin，经过我的踩雷，5.0.1的版本是可以用的

npm uninstall --save-dev compression-webpack-plugin
或
yarn remove compression-webpack-plugin

npm i --save-dev compression-webpack-plugin@5.0.1
或
yarn add compression-webpack-plugin@5.0.1 -D

3. vue.config.js进行配置

// 打包 使用gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin');

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


module.exports = {
  ...
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名

        threshold: 10240, // 对超过10K的数据进行压缩

        minRatio: 0.8, // 极小比
      }),
    ]
  },
}

vue.config.js完整代码：

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');

// 打包 使用gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css'];

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  // 打包后运行环境目录
  publicPath: process.env.NODE_ENV === "production" ? "/GisFrame2/" : "/",

  lintOnSave: true, // eslint-loader 是否在保存的时候检查
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  filenameHashing: true, // 文件hash
  devServer: {
    // port: 3306,
    open: true,
    proxy: {
      "/api": {
        // target: http://xxx.xxx.xx.xxx:xxxx/api/", // [开发服务器接口]
        // target: "http://xxx.xxx.xx.xxx:xxxx/api/", // [测试服务器接口]
        target: "http://xxx.xxx.xx.xxx:xxxx/api/", // [正式服务器接口]
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/" //路径转发代理
        }
      },

      "/LocalDemoApi": {
        target: "http://localhost:8080", //路径指向本地主机地址及端口号
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/LocalDemoApi": "/DemoData" //路径转发代理
        }
      },
      
    }
  },
  /*
    配置vue-cli3项目，可以说是all in vue.config.js的。
    当然，封装、就一定会留个口给用户，去对底层进行自定义操作。
    vue.config.js的配置项中，有两个口，configureWebpack和chainWebpack。
    configureWebpack:
        是调整webpack配置最简单的一种方式，可以新增也可以覆盖cli中的配置。
    可以是一个对象：被 webpack-merge 合并到webpack 的设置中去
    也可以是一个函数：如果你需要基于环境有条件地配置行为，就可以进行一些逻辑处理，可以直接修改或
    新增配置，(该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。
    在函数内，你可以直接修改配置，或者返回一个将会被合并的对象。
    chainWebpack:
        这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则
    和具名插件，可以通过其提供的一些方法链式调用，在cli-service中就使用了这个插件
  */
  configureWebpack: {
    plugins: [ 
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {
            drop_console: true,
            drop_debugger: false,
            pure_funcs: ['console.log'] // 移除console
          }
        },
      }),
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名
        threshold: 10240, // 对超过10K的数据进行压缩
        minRatio: 0.8, // 极小比
      }),
    ],

  },

  chainWebpack: config => {
    // 配置import 和 require 等路径别名,webpack中是通过 resolve.alias 来实现此功能的,通过set方法添加修改想要的alias 配置
    config.resolve.alias
      .set("@", resolve("src"))
      .set("spatial", resolve("public/SpatialData"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"));
  },

};

4. nginx 服务端开启gzip性能优化

项目打个包出来看看

关于nginx性能优化方面，可以讲的东西很多，比如Nginx运行工作进程数量，Nginx运行CPU亲和力，Nginx最大打开文件数，Nginx事件处理模型，开启高效传输模式，连接超时时间，fastcgi 调优，gzip 调优，expires 缓存调优，防盗链，内核参数优化等等

这次我们主要讲的是gzip 调优

核心配置代码如下，我都加了注释，可放心食用：

    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; #  压缩文件类型
    gzip_static on; # nginx 会优先匹配你的 gzip 文件来返回，如果没有就寻找相应资源进行 gzip 压缩再返回

完整nginx.conf配置代码如下：

http {
    # ===============================================开启nginx服务端gzip性能优化=============================
    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; #  压缩文件类型
    gzip_static on; # nginx 会优先匹配你的 gzip 文件来返回，如果没有就寻找相应资源进行 gzip 压缩再返回
    # ===============================================开启nginx服务端gzip性能优化=============================

    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;

    server {
        listen       8081;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

     ...

    }

5. 看看部署之后的效果

都看到这里了，求各位观众大佬们点个赞再走吧，你的赞对我非常重要

【vue深入】项目打包之gzip压缩，减少体积，提升响应速度

前言