前端性能优化--减少首屏加载时间--gzip压缩

前端性能优化--减少首屏加载时间--gzip压缩,第1张

前言:在项目build(vue、react…)之后,我们再使用gzip做一下压缩这些静态资源,让用户请求这些资源的大小会降低很多,从而达到减少首屏加载时间的目标,而gzip压缩主要分为两种“动态压缩”“静态压缩”

动态压缩

指的是在服务器上进行配置,使得每次用户在访问页面时,即发起http请求到服务器,服务器就会自动把你访问的资源先压缩成.gz文件,然后浏览器下载之后再进行解压,从而达到提高访问效率的特点。

步骤(服务器以nginx为例):

打开nginx的配置文件:

gizp on;注释打开,表示启动gzip压缩,然后并加入如下配置在其下面:

gzip_comp_level 5; // 表示压缩级别,有1-9的级别可选,默认值为1,级别越高压缩得越厉害,但同样对服务器的性能要求越高,所以不是越高越好,也许你设置的越高,所需要的服务器的GPU资源越多,压缩的耗时越长,导致总共的请求时间还反而变长了,所以应该视情况而定。gzip_min_length 2k; // 表示压缩的最低大小,默认20k,比如我这里写的是2k,就表示该文件大小如果大于2k了,就采用gzip压缩,否则不压缩gzip_types application/javascript text/css; // 表示要压缩的MIME类型,默认值:text/html,如果请求的MIME类型不在这里面,就不压缩

修改成如下:

动态压缩优化效果:

文件大小优化变化

取出同一个文件的响应头变化

静态压缩

指通过前端提前将静态文件压缩成.gz文件,然后再放在服务器上,这样浏览器访问资源的时候,服务器就不用另外花费GPU来压缩这些文件了,因为你已经提前压缩好了,相对于动态压缩会更好一些。

步骤:

1、安装compression-webpack-plugin,

命令:

  npm install compression-webpack-plugin -D

  yarn add compression-webpack-plugin -D

2、webpack中配置(不同的框架的脚手架配置文件方法不同,所以这里就统一列出webpack的配置):

 	const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    const productionGzipExtensions = ['js','css']
    
    // 配置compression-webpack-plugin
    new CompressionWebpackPlugin({
      algorithm:'gzip', // 可以是 (buffer, cb) => cb(buffer) 或者是使用 zlib 里面的算法的 {String}
      test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'), //处理所有匹配此 {RegExp} 的资源
      threshold:10240, //只处理比这个值大的资源。按字节计算,即这里的10240为10kb,也就是文件大小大于10kb的才处理
      minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
    })

3、打开nginx压缩包目录,依次执行命令下载相关nginx模块

#  usr/local/nginx-1.20.0

./configure http_gzip_static_module

make && make install

4、在服务器上配置,这里以nginx为例,打开nginx的配置文件

重启nginx即可,优化后的效果:
*注意:无论是哪种方式,只要修改过nginx配置,都要重启才能生效

最后,优化对比:

文件:main.28acee27.js

情况大小请求时间
未优化2.6M34.53s
动态gzip730KB8.64s
静态gzip719KB6.58s

文件:main.5acf62b1.css

情况大小请求时间
未优化783kb10.41s
动态gzip112KB286ms
静态gzip108KB466ms

可见优化效果还是很显著的,还有其他方法看我文章

欢迎分享,转载请注明来源:内存溢出

原文地址:http://outofmemory.cn/web/1296621.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-10
下一篇2022-06-10

随机推荐

  • 加拿大康尼斯托加学院学制

    立思辰留学360介绍:康尼斯托加学院Conestoga College Institute of Technology and Advanced Learning于1967年成立,是安大略省政府的应用

    2022-07-03
    000
  • 萨里大学住宿条件

      萨里大学位于英格兰东南的萨里郡吉尔福德 ,距伦敦30分钟车程。萨里大学成立于 1891年,其前身为伦敦的巴特西理工学院。在1966年9月9日被皇家许可而成为综合性大学。 目前该校研究生与本科生人数

    2022-07-03
    000
  • 2017杜伦大学商学院好吗

    立思辰留学360介绍,杜伦大学是一所由16个学院组成的联合大学。是英格兰最早创立的第三所大学(1832年创建)。杜伦大学与商务、金融及管理行业的著名公司始终保持着密切联系。在研究、会计、银行、财务管理

    2022-07-03
    000
  • 新加坡mdis学院介绍

    据立思辰留学360新加坡部介绍:新加坡管理发展学院是新加坡一所比较老牌的私立院校。经过半个多世纪的积淀,新加坡管理发展学院已经发展成为新加坡知名的院校之一。新加坡mdis学院地址是:501 stirl

    2022-07-03
    300
  • 桑德兰大学与胡弗汉顿大学哪个好

      桑德兰大学与胡弗汉顿大学都有自己的优势专业,具体请咨询立思辰留学360专业顾问团队,咨询电话:4008-941-360桑德兰大学英国桑德兰大学是一所位于英国英格兰地区的国立综合性大学,并以其高质量

    2022-07-03
    000
  • 新加坡YMCA学校入学测试

    立思辰留学介绍:新加坡YMCA学校始建于1913年,是一所基督教全日制正规私立教育机构。在这98年的历程中,该校见证了数以万计的莘莘学子成功地完成了新加坡体制下的教育与培训。新加坡YMCA学校融合多种

    2022-07-03
    400
  • 2017年谢菲尔德大学设施好不好

    谢菲尔德大学(The University of Sheffield),简称谢大,世界百强名校,英国顶尖名校。位于英格兰第四大城市谢菲尔德市,在英国一直享有美誉。其建校历史可追溯到1828年。据立思辰

    2022-07-03
    300
  • 2017年新加坡东亚管理学院金融硕士专业就业前景如何

    立思辰留学360介绍,新加坡东亚管理学院应对就业市场的需求开设了金融硕士专业课程,让学生掌握充足的商业技能,了解区域和全球的业务在实践中不同文化起到的左右。东亚的这个金融硕士是和英国赫瑞瓦特大学爱丁堡

  • 2017年ERC Singapore学费贵吗

    立思辰留学360介绍,新加坡ERC创业管理学院是由新加坡当地一批杰出的优秀企业家于2003年创立的,是隶属于新加坡企业家资源中心。因为是由新加坡当地企业家创办的,学校所开设的课程都是很具有实用性的,学

    2022-07-03
    000

发表评论

登录后才能评论

评论列表(0条)

    保存