要不要用gzip优化前端项目
这两天在做项目优化,注意到webpack有一个compression-webpack-plugin插件,可以打包成gzip格式部署到服务器,了解到了GZIP,其实GZIP有很多点,这里我们只讨论前端范围内GZIP的应用。
什么是GZIP ?
GZIP是网站压缩加速的一种技术,GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNIX系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件,它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式,或者说一种文件格式。有兴趣了解GZIP实现原理的可以移步https://zhuanlan.zhihu.com/p/24764131,这里不在赘述。
GZIP优点:
减少文件大小。gzip压缩比率在3到10倍左右,可以大大节省服务器的网络带宽。而在实际应用中,并不是对所有文件进行压缩,通常只是压缩静态文件。减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间。对于带宽较低的服务器是一种利好,开启后可以加快我们网站的打开速度,原理是经过服务器压缩,客户端浏览器快速解压的原理,可以大大减少了网站的流量。
GZIP缺点:
占用了一些服务器和客户端的CPU,有可能操作失误,会造成网站无法访问,有可能蜘蛛无法进行爬行,造成收录不佳,谷歌可以完美的支持GZip压缩,百度支持的并不太好。
总结:
目前的带宽一般都充足了,没有必要进行压缩,有些压缩过的文件及图片,展示出来的不是很清楚,这就是缺点,想要是有效的访问速度,可以采用CDN加速或者购买更高配置服务和带宽,完美解决访问速度慢的问题。
鉴于我们公司的服务器情况,和后端技术的建议,最终没有启用gzip,要cpu还是要带宽,还是要根据公司具体情况来选择啦。
参考文章:http://www.pxy866.com/seo/1175.html
要不要用gzip优化前端项目的更多相关文章
- VUE 前端项目优化方法
前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验.对此,我们需要通 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- vue前端项目优化策略
vue前端项目有什么优化策略? .生成打包报告.(可以发现一些问题,并进行解决)2.使用第三方库启用CDN加载3.使用Element-ui的话,按需加载组件4.使用路由懒加载 生成打包报告: .生成打 ...
- gulp + webpack 构建多页面前端项目
修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...
- 前后端分离之前端项目构建(grunt+require+angular)
前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...
- 使用gulp来构建一个前端项目
什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...
- Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架
在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...
- 配置 FIS 来适配 go revel 框架以优化前端缓存策略
对于前端工程师来说,浏览器缓存优化是个永远的话题.前几天看了知乎上的一个问答:<大公司里怎样开发和部署前端代码?>,深以为然,所以决心使用 FIS 来优化自身的前端文件. 我们的项目使用了 ...
- [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...
随机推荐
- 「mysql优化专题」视图应用竟然还可以这么优化?不得不收藏(8)
一.视图概述(技术文): (1)什么是视图? 视图是基于 SQL 语句的结果集的可视化的表. 视图包含行和列,就像一个真实的表.视图中的字段就是来自一个或多个数据库中的真实的表中的字段.视图并不在数据 ...
- Protocol Buffer 时间类型定义
ProtoBuf3中新增了TimeStamp类型,使用示例如下: syntax = "proto3"; import public "google/protobuf/ti ...
- .Net6种成员的可访问性
CLR术语 C#术语 描述 Private private 成员只能由定义类型或任何嵌套类型访问 Family protected 成员只能由定义类型,任何嵌套类型或者不管在任何程序集中声明的派生类型 ...
- Error:Execution failed for task ':app:mergeDebugResources'. > Crunching Cruncher ******.9.png
有时候在Android Studio导入Eclipse项目时,会出现Error:Execution failed for task ':app:mergeDebugResources'. > C ...
- lograted日志切割脚本
root@op-testsetup-web3.idc1.yiducloud.cn:/etc/logrotate.d# cat etcd /home/work/docker/logs/etcd/prev ...
- c# 了解c# 面向对象
C#是微软公司发布的一种面向对象的.运行于.NET Framework之上的高级程序设计语言.并定于在微软职业开发者论坛(PDC)上登台亮相.C#是微软公司研究员Anders Hejlsberg的最新 ...
- Spring 自动装配及自动注册的相关配置
Spring支持好几种自动装配(Autowiring)的方式,以及自动扫描并注册Bean的配置(在beans.xml中配置). 下文我们进行一个小结. 1. <context: annotati ...
- jmeter中一次运行多条sql语句
操作比较简单,主要就分两步: 第一步:在JDBC Connection Configuration中设置,主要见下图标注部分增加:?allowMultiQueries=true 第二步:在JDBC R ...
- 根据图片的路径(绝对路径/相对路径都可以),生成base64的
根据图片的路径(绝对路径/相对路径都可以),生成base64的 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Material Theme 文件名的标签(tab)被大写了
我们平时使用的都是小写的,今天第一次使用Material Theme 这个发现标签被大写了,百度后没找到然后自己找了找设置,解决了 原来是这样的, 设置如下 设置后: 希望能帮到有同样问题的同学