2020-11-18 gzip 前后端数据传输压缩‘pako’

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2020-11-18 gzip 前后端数据传输压缩‘pako’相关的知识,希望对你有一定的参考价值。

参考技术A  let zlib = require("pako"); //引入

//压缩方法 用来将大数据压缩后在传给后端

Vue.prototype.zip = function (str) 

            //encodeURIComponent 将字符串作为URI组件进行编码

            //zlib.gzip() 将编码后的数据进行压缩,string类型

            let binaryString = zlib.gzip(encodeURIComponent(str), 

                to: "string"

            );

            //btoa()将压缩后的数据变成base64格式

            return btoa(binaryString);

        ,

//解压缩方法,前端接受后端大数据后,先解压缩在进行后面的逻辑

        Vue.prototype.unzip = function (b64Data) 

            //atob()将base64格式数据转化成压缩数据

            let strData = atob(b64Data);

            //split()方法用于把一个字符串分割成字符串数组

            //通过map函数进行遍历,并对每一个进行 Unicode 编码

            let charData = strData.split("").map(function (x) 

                //charCodeAt() 方法可返回指定位置的字符的 Unicode 编码

                return x.charCodeAt(0);

            );

            //Uint8Array 8 位无符号整数值的类型化数组

            let binData = new Uint8Array(charData);

            // console.log(binData);

            //解压缩 充气

            let data = zlib.inflate(binData);

            //fromCharCode 将 Unicode 编码转为一个字符:

            // console.log(data);

           //分片解压缩,防止数据量过大,浏览器栈溢出报错

            let chunk = 8 * 1024;

            let res = "";

            let dataLength = data.length / chunk;

            let i;

            for (i = 0; i < dataLength; i++) 

                res += String.fromCharCode.apply(

                    null,

                    data.slice(i * chunk, (i + 1) * chunk)

                );

            

            res += String.fromCharCode.apply(null, data.slice(i * chunk));

            //decodeURIComponent() 对 encodeURIComponent() 函数编码的 URI 进行解码

            strData = res;

            return decodeURIComponent(strData);

        ,

2021-02-20:

    问题更新:最新客户在使用的过程中,发现页面展示会出现莫名其妙的“+”。

    对此,我们进行了一番查询,发现问题原因如下:后端在将数据压缩的过程中,正常情况下会将数据中的“+”号编码成%2B,同时会将“ 空格 ”编码成“%20”,那么前端接收以后,就可以进行解码。

    但是,我们发现数据中的“+”会被正常编码,但是空格却不会,而是编码成了“+”.那么,前端接收以后在解码的过程中,就无法对“+”进行解码,就会造成显示和真实数据不一致。

解决方案:后端在压缩完成后,再将所有的“+”编码替换成“%20”,这样,在前端接收数据后,就能将数据正常解码并显示。

Nginx 动态压缩与静态压缩,显著提高前后端分离项目响应速度!

本文是昨天文章的姊妹篇,昨天我们从 ElementUI 按需加载和 Spring Boot 开启 gzip 压缩两个方面来聊了 Spring Boot+Vue 项目首屏优化的问题:

但是我们也说了,前后端分离开发主流的部署是分开部署,即前端使用 Nginx 来部署。如果使用 Nginx 来部署前端项目,优化要怎么做?一起来看下:

Nginx 中配置前端的 gzip 压缩,有两种思路:

  1. Nginx 动态压缩,静态文件还是普通文件,请求来了再压缩,然后返回给前端。
  2. Nginx 静态压缩,提前把文件压缩成 .gz 格式,请求来了,直接返回即可。

如果大家对于 Nginx 还不熟悉,可以先看看松哥这篇文章:

Nginx 压缩,一起来看大屏幕:

2.2.1 Nginx 动态压缩

动态压缩 Vue 还是使用普通的打包编译后的文件,将前端编译打包后的文件拷贝到 Nginx 的 html 目录下,然后访问 nginx:http://192.168.91.129

确保 nginx 运行成功后,接下来对 nginx 进行配置:

gzip  on;  # 开启 gzip
gzip_min_length 2k;# 超过 2kb 进行压缩
gzip_disable msie6; # ie6 不适用 gzip
gzip_types text/css application/javascript text/javascript image/jpeg image/png image/gif; # 需要处理的文件

配置完成后,重启 Nginx:

./nginx -s reload

启动成功后,再去访问前端页面,就可以看到压缩效果了。

2.2.2 Nginx 静态压缩

上面的动态压缩有一个问题,就是每次请求响应的时候都要压缩,其实都是相同的文件,总是压缩有点浪费资源。

我们可以提前将文件压缩好,就保存在服务端,需要用的时候直接返回,就会方便很多。

这需要我们首先在前端安装压缩插件:

npm install compression-webpack-plugin -D

安装成功之后,接下来在 vue.config.js 中进行配置:

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
proxy: proxyObj
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 1024,
deleteOriginalAssets: false
})
]
}
}
}
}
  • threshold 表示超过 1kb 的文件就进行压缩。
  • deleteOriginalAssets 表示压缩后是否删除原文件。

配置完成后,再次执行打包命令 vue-cli-service build。这次打包完成后,我们可以在 js 目录下看到 .gz 文件,如下:

接下来将文件上传到 Nginx 服务器,然后对 Nginx 重新进行编译打包。想让 Nginx 返回已经压缩好的文件,需要用到 Nginx 中的 http_gzip_static_module 模块,这个模块可以发送以 .gz 作为文件扩展名的预压缩文件,所以我们要对 Nginx 重新进行编译打包:

./configure --with-http_gzip_static_module
make
make install

然后在 Nginx 配置文件中开启 gzip_static,如下:

gzip_static  on;

注意,开启了 gzip_static 后,gzip_types 就失效了,所以也没必要配置这个属性了。

配置完成后,重启 Nginx,再去访问,查看浏览器日志,就会发现 gzip 已经生效了。

「注意」

静态压缩返回的 gzip 压缩文件都是提前准备好的,没有 .gz 格式的文件就会自动返回原文件。这是一种和动态压缩不同的响应策略。动态压缩是根据 Nginx 中的配置,超过配置的大小就会自动进行压缩。

好了,这一波操作下来,首屏加载速度提高了 3 倍左右。

当然,还有后招,松哥抽空再和大家聊。

精彩文章推荐:



喜欢就点个"在看"呗^_^

以上是关于2020-11-18 gzip 前后端数据传输压缩‘pako’的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli + nginx项目开启gzip压缩

GZIP压缩优化

spring通过GZIP压缩提高网络传输效率(可以实现任何资源的gzip压缩包括AJAX)

[译] 理解 zip 和 gzip 压缩格式背后的压缩算法

[扩展知识] 理解 zip 和 gzip 压缩格式背后的压缩算法

如何在Android系统中使用gzip进行数据传递