前端性能优化之gzip

简介: 前端性能优化之gzip

前言


HTTP 可以对传输的内容进行压缩,减少网络实际传输数据的大小。服务器会将资源进行压缩后传输到客户端,浏览器收到文件后进行解析。对于纯文本文件可以压缩到之前大小的30%-40%,大大提高了传输效率。


什么是gzip


gzip是一种数据的压缩格式,也可以说是文件格式。linux系统该文件后缀为.gz 。使用gzip需要web容器,浏览器的支持。

  • 配置 js、text、json、css 这种纯文本进行压缩,效率极高
  • 压缩需要消化CPU,对于大文件(音乐/视频/图片)的压缩,会增加服务器压力。


Nginx配置gzip


进入nginx配置文件(betpw.conf是我自己项目的nginx配置文件)

cd /etc/nginx/conf.d
vi /betpw.conf
# 开启gzip,关闭用off
gzip on;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间,推荐6
gzip_comp_level 6;
# 设置压缩所需要的缓冲区大小 
gzip_buffers 16 8k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# 选择压缩的文件类型,其值可以在 mime.types 文件中找到。
gzip_types text/plain text/css application/json application/javascript
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;

config.js配置


  • 安装compression-webpack-plugin
npm i compression-webpack-plugin --save-dev
  • 引入
var CompressionWebpackPlugin  = require('compression-webpack-plugin')
  • 配置(chainWebpack/configureWebpack两种方式)
 // gzip需要nginx进行配合
chainWebpack(config) {
   config
     .plugin('compression')
     .use(CompressionWebpackPlugin)
     .tap(() => [
          {
            new CompressionPlugin({ 
                    //此插件不能使用太高的版本,否则报错:TypeError: Cannot read property 'tapPromise' of undefined
                    // filename: "[path][base].gz", // 这种方式是默认的,多个文件压缩就有多个.gz文件,建议使用下方的写法
                    filename: '[path].gz[query]', //  使得多个.gz文件合并成一个文件,这种方式压缩后的文件少,建议使用
                    algorithm: 'gzip', // 官方默认压缩算法也是gzip
                    test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩,这里是给html、css、js以及字体(.ttf和.woff和.eot)做压缩
                    threshold: 10240, //以字节为单位压缩超过此大小的文件,使用默认值10240吧
                    minRatio: 0.8, // 最小压缩比率,官方默认0.8
                    //是否删除原有静态资源文件,即只保留压缩后的.gz文件,建议这个置为false,还保留源文件。以防:
                    // 假如出现访问.gz文件访问不到的时候,还可以访问源文件双重保障
                    deleteOriginalAssets: false
          }
     ])
  }
    configureWebpack: config => {
        // 开发环境不配置
        if (process.env.NODE_ENV !== 'production') return
        // 生产环境才去配置
        return {
            plugins: [
                new CompressionPlugin({ 
                    filename: '[path].gz[query]', 
                    algorithm: 'gzip', 
                    test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, 
                    threshold: 10240, 
                    minRatio: 0.8,
                    deleteOriginalAssets: false
                })
            ]
        }
    },

附nginx中gzip配置参数


  • gzip:决定是否开启gzip模块

param:on | off


  • gzip_proxied:Nginx做为反向代理的时候启用

param:off | expired | no-cache | no-sotre | private | no_last_modified | no_etag | auth | any


off:关闭所有的代理结果数据压缩

expired:header中包含”Expires”头信息时启用压缩

no-cache:header中包含”Cache-Control:no-cache”头信息时启用压缩

no-store:header中包含”Cache-Control:no-store”头信息时启用压缩

private:header中包含”Cache-Control:private”头信息时启用压缩

no_last_modified:header中包含”Last_Modified”头信息时启用压缩

no_etag:header中包含“ETag”头信息时启用压缩

auth:header中包含“Authorization”头信息

any:无条件压缩所有结果数据


  • gzip_buffers:处理请求压缩的缓冲区数量和大小,其中number:指定Nginx服务器向系统申请缓存空间个数,size指的是每个缓存空间的大小。主要实现的是申请number个每个大小为size的内存空间。这个值的设定一般会和服务器的操作系统有关,所以建议此项不设置,使用默认值即可。

param1:int 增加的倍数,param2:int(k) 后面单位是k,example:gzip_buffers 4 16K;


gzip_comp_level:设置gzip压缩等级,等级越底压缩速度越快文件压缩比越小,反之速度越慢文件压缩比越大,默认值为1


  • gzip_min_length:当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时,所有页面都进行压缩。进行压缩响应页面的最小长度,content-length

    gzip压缩功能对大数据的压缩效果明显,但是如果要压缩的数据比较小的化,可能出      现越压缩数据量越大的情况,因此我们需要根据响应内容的大小来决定是否使用Gzip功 能,响应页面的大小可以通过头信息中的Content-Length来获取。但是如何使用了Chunk编码动态压缩,该指令将被忽略。建议设置为1K或以上,默认为20


  • gzip_http_version:用于识别http协议的版本,早期的浏览器不支持gzip压缩,用户会看到乱码,所以为了支持前期版本加了此选项,目前此项基本可以忽略

param: 1.0|1.1


  • gzip_types: 设置需要压缩的MIME类型,非设置值不进行压缩

param:text/html | application/x-javascript | text/css | application/xml


  • gzip_vary on: 该指令用于设置使用gzip进行压缩发送是否携带“Vary:Accept-Encoding”头域的响应头部。主要是告诉接收方,所发送的数据经过了Gzip压缩处理param:on | off


目录
相关文章
|
8天前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
14 3
|
17天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
35 6
|
19天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
48 7
|
18天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
31 2
|
25天前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
34 3
|
24天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
20 1
|
24天前
|
缓存 前端开发 JavaScript
如何优化前端资源
如何优化前端资源
|
25天前
|
监控 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
28 2
|
6天前
|
缓存 前端开发 JavaScript
前端性能优化:让你的网站更快、更流畅
前端性能优化:让你的网站更快、更流畅
12 0
|
25天前
|
前端开发 JavaScript UED
前端性能优化:打造流畅用户体验的秘诀
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘诀
30 0