vue首屏减少加载时间(gzip)

Posted 2020-11-01 灰犀

最初,我以为单纯的以为通过按需引入相对应的组件和懒加载就可以有效的减少请求的时间

我to young啊，无论我怎么改，请求时间就是降不下来，后来，直到我遇到了本期的主角，gzip这个神奇的东西

原本我的请求体积是1M多（用了两个UI组件能不大吗（-_-）），用了懒加载和按需引入，虽然说降到600k

但是还是很大，

于是乎，在头疼的时候，我遇到了gzip

OMG 体积变成了100多k！！！！！！ 

 

 

那么gzip是个什么东西呢

GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNIX系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40％.这样传输就快了,效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载. 一般服务器中都安装有这个功能模块的.

 

简单来说，看到zip就知道是与压缩有关的东西了

他是用在服务端上的

node.js启用gzip

下面说一下node的express框架如何使用gzip:

1.安装一个compression依赖：

npm install compression

2.调用：

var compression = require(‘compression‘)
var app = express();

//尽量在其他中间件前使用compression
app.use(compression());

 

基本的使用就是这样就ok了，是不是很简单咧

 

另外如果想只对某些请求使用此功能，可以使用它的过滤方法：

app.use(compression({filter: shouldCompress}))

function shouldCompress (req, res) {
  if (req.headers[‘x-no-compression‘]) {
    // 这里就过滤掉了请求头包含‘x-no-compression‘
    return false
  }

  return compression.filter(req, res)
}

　　

其他的功能请参考compression的文档。