关于前端:前端性能优化之Gzip

34次阅读

共计 2503 个字符,预计需要花费 7 分钟才能阅读完成。

前言

因为咱们团队的前端我的项目越来越宏大,加之 Vue 的 SPA 首屏加载个性,导致系统第一次加载速度越来越迟缓,可能达到几十秒的水平,所以为了优化用户性能体验,咱们抉择了开启 Gzip 进行文件压缩,的确达到了显著的成果。

什么是 Gzip?

gzip 是一种数据的压缩格局,或者说是一种文件格式。

Gzip 本来用户 UNIX 零碎的文件压缩,起初逐步成为 Internet 最支流的数据压缩格局。
当用户拜访咱们的 web 站点时,服务器就将咱们的网页文件进行压缩,将压缩后的文件传输到客户端,对于纯文本文件咱们能够至多压缩到原大小的 40%,这样大大提高了传输效率,页面便可更快的加载进去。

Nginx 服务端配置 Gzip 服务

因为目前咱们我的项目是应用 ngxin 来部署前端的,nginx 自带 HttpGzip 模块 所以咱们间接对 nginx.conf 文件的 http 配置项进行配置即可。但绝对的因为 nginx 本身解决申请而后压缩返回,会耗费对应的服务器内存。

    # 开启或者敞开 gzip 模块(on|off)
    gzip on;
    # 容许压缩的页面最小字节数, 默认值是 0,不论页面多大都压缩。倡议设置成大于 1k 的字节数,小于 1k 可能会越压越大
    gzip_min_length 1k; 
    # 设置零碎获取几个单位的缓存用于存储 gzip 的压缩后果数据流。例如 4 4k 代表以 4k 为单位,依照原始数据大小以 4k 为单位的 4 倍申请内存。gzip_buffers 4 16k; 
    # 辨认 http 的协定版本。因为晚期的一些浏览器或者 http 客户端,可能不反对 gzip 自解压,用户就会看到乱码,所以做一些判断还是有必要的。#gzip_http_version 1.0;
    # gzip 压缩比,1 压缩比最小处理速度最快,9 压缩比最大但解决最慢(传输快但比拟耗费 cpu)。gzip_comp_level 2;
    # 匹配 MIME 类型进行压缩,(无论是否指定)"text/html" 类型总是会被压缩的。gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    # 和 http 头有关系,加个 vary 头,给代理服务器用的
    gzip_vary off;
    # 示意 IE6 及以下禁止压缩
    gzip_disable "MSIE [1-6]\.";

测试成果

  • 开启 gzip 前

  • 开启 gzip 后

客户端压缩 Gzip

咱们应尽可能减少对服务端内存的应用,毕竟服务端的资源是十分宝贵的,这里咱们依然应用 nginx 进行前端部署,咱们在客户端替 nginx 解决压缩文件这一步操作,nginx 便可间接应用咱们压缩好的文件,上面是一个基于 vue-cli 配置的前端我的项目。

1、装置插件

这里最好装置低版本,避免报错。

npm install compression-webpack-plugin@5.0.1 -D

2、配置 vue.config.js 注册插件

这里能够依据大家不同的配置,总之就是将 webpack 插件进行注册。

const CompressionPlugin = require("compression-webpack-plugin");
module.export = {
    configureWebpack: {
         plugins: [
      new CompressionPlugin({filename: "[path].gz",
        // 压缩算法
        algorithm: "gzip",
        // 匹配文件
        test: /\.js$|\.css$|\.html$/,
        // 压缩超过此大小的文件, 以字节为单位
        threshold: 10240,
        minRatio: 0.8,
        // 删除原始文件只保留压缩后的文件
        deleteOriginalAssets: false
      })
    ]
    }
}

3、运行打包命令

胜利运行后,便能够在打包文件中看到.gz 结尾的文件了,将打包后的文件上传到指定的 nginx 文件夹下。

npm run build

4、配置 nginx

这里须要 nginx 对应的插件 http_gzip_static_module,之前我是通过 yum 装置的 nginx,这里仿佛不能够,须要手动装置。这里目录能够依据大家集体状况而定
装置 nginx

cd /usr/local/src/
wget http://nginx.org/download/nginx-1.18.0.tar.gz
tar zxvf nginx-1.18.0.tar.gz
cd nginx-1.18.0/
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module
make && make install

批改 nginx.conf

cd /usr/local/nginx/conf/
vim nginx.conf
server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
            gzip_static on; #动态压缩
        }
 }

启动 nginx 服务

cd /usr/local/nginx/sbin
./nginx

5、测试成果

这里咱们尽管服务端 js 文件夹里只有.gz 格局的文件(其余的文件已删除),但客户端却胜利读取了。

比照

无论是服务端与客户端进行 gzip 的压缩,咱们都大大放大了文件体积,给用户带来了更好的体验。
服务端解决 gzip 长处是只需配置一下即可,无需简单操作,但毛病是会耗费服务器内存。
客户端解决 gzip 长处是无需服务器进行文件压缩,缩小服务器内存耗费,但配置起来相比服务端 gzip 会稍加繁琐。

参考文档

Nginx 中文文档
什么是 GZIP, 有什么劣势, 如何开启 GZIP?
vue-cli4 开发我的项目中开启 gzip 压缩,优化打包体积,晋升加载速度
Nginx gzip static 动态压缩
配置 nginx 间接应用 webpack 生成的 gz 压缩文件,而不必 nginx 本人压缩

正文完
 0