一对一聊天平台制作，开启gzip压缩提高加载速度

一对一聊天平台制作，开启gzip压缩提高加载速度

1、gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。
2、之后就是nginx配合开启gzip模式，这个比较简单，只要你对nginx有一点了解，我们在nginx.conf中的http中配置一些代码。
compression-webpack-plugin这个依赖在npm run build是会生成.gz文件。之后项目访问的文件就是这个.gz文件，正常的项目打包体积会减少一半还要多，先看下打包后的文件：

 1. webpack安装compression-webpack-plugin插件，新版本有问题的话下载1.1.12版本配置vue.config.js

npm i compression-webpack-plugin --save-dev

vue.config.js配置：

const CompressionWebpackPlugin = require('compression-webpack-plugin')
configureWebpack:{
    plugins:[
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        // test: /\.js$|\.html$|\.json$|\.css/,
        test: /\.js$|\.json$|\.css/,
        threshold: 10240, // 只有大小大于该值的资源会被处理
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        // deleteOriginalAssets: true // 删除原文件
      })
    ],

2. 需要nginx服务器，更改nginx.conf文件， 加在如图所示位置

# 开启gzip。
gzip on
# 开启后如果能找到 .gz 文件，直接返回该文件，不会启用服务端压缩。
gzip_static on
# 文件大于指定 size 才压缩，以 kb 为单位。
gzip_min_length 1;
# 用于识别http协议的版本，早期的浏览器不支持gzip压缩，用户会看到乱码，所以为了支持前期版本加了此选项,目前此项基本可以忽略
gzip_http_version 1.1;
# 压缩级别，1-9，值越大压缩比越大，但更加占用 CPU，且压缩效率越来越低。
gzip_comp_level 9;
# 压缩的文件类型。
gzip_types text/css application/javascript application/json;
root /dist;

修改配置后重新加载生效：nginx -s reload

 3. 验证是否配置成功

这步就很简单了只需要查看chunk类文件的Response Headers的Content-Encoding是否是gzip即可

 

以上就是一对一聊天平台制作，开启gzip压缩提高加载速度， 更多内容欢迎关注之后的文章