这两天在做项目优化,注意到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优化前端项目的更多相关文章

  1. VUE 前端项目优化方法

    前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验.对此,我们需要通 ...

  2. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  3. vue前端项目优化策略

    vue前端项目有什么优化策略? .生成打包报告.(可以发现一些问题,并进行解决)2.使用第三方库启用CDN加载3.使用Element-ui的话,按需加载组件4.使用路由懒加载 生成打包报告: .生成打 ...

  4. gulp + webpack 构建多页面前端项目

    修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

  5. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

  6. 使用gulp来构建一个前端项目

    什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...

  7. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...

  8. 配置 FIS 来适配 go revel 框架以优化前端缓存策略

    对于前端工程师来说,浏览器缓存优化是个永远的话题.前几天看了知乎上的一个问答:<大公司里怎样开发和部署前端代码?>,深以为然,所以决心使用 FIS 来优化自身的前端文件. 我们的项目使用了 ...

  9. [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建

    一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...

随机推荐

  1. spring -boot s-tarter 详解

    Starter POMs是可以包含到应用中的一个方便的依赖关系描述符集合.你可以获取所有Spring及相关技术的一站式服务,而不需要翻阅示例代码,拷贝粘贴大量的依赖描述符.例如,如果你想使用Sprin ...

  2. TypeScript学习笔记之基础类型

    从今天开始学习typescript了,记录ts学习点滴,最后,使用ts结合nodejs开发后端应用,一起共勉吧: typescript最新版本2.6,所有演示代码均基于此版本 开始之前确定安装了如下n ...

  3. python作用域与命名空间

    什么是命名空间 比如有一个学校,有10个班级,在7班和8班中都有一个叫“小王”的同学,如果在学校的广播中呼叫“小王”时,7班和8班中的这2个人就纳闷了,你是喊谁呢!!!如果是“7班的小王”的话,那么就 ...

  4. java显示目录文件列表和删除目录

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  5. iOS Swift--UIImageView UIImage

    1.UIImageView + UIImage    Demo import UIKit class UIImageViewViewController: UIViewController { var ...

  6. xcode编译报错unknown error -1=ffffffffffffffff Command /bin/sh failed with exit code 1

    升级完xcode9.1之后,编译项目出现如下错误: CI今日构建时报出如下错误: /Users/xxx/Library/Developer/Xcode/DerivedData/Snowball-ebl ...

  7. OpenStack运维(二):OpenStack计算节点的故障和维护

    1.计划中的维护 举例:需要升级某一个计算节点的硬件配置,需要将计算节点上的虚拟机迁移后在对其进行操作,分为两种情况. 1.1 云系统使用了共享存储 a. 获取虚拟机列表:nova list --ho ...

  8. @NotEmpty、@NotBlank、@NotNull的区别

    @NotEmpty 用在集合类上面  @NotBlank 用在String上面  @NotNull 用在基本类型上 只有简单的结果,但是再更具体一点的内容就搜不到了,所以去看了看源码,发现了如下的注释 ...

  9. Webpack 2 视频教程 015 - Webpack 2 中的文件压缩

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  10. 关于HTTP协议头域详解

    HTTP1.1 请求头:消息头  Accept:text/html,image/*  告诉服务器,客户机支持的数据类型 Accept-Charset:ISO-8859-1  告诉服务器,客户机采用的编 ...