全栈笔记

前端性能优化之——gzip

2019-11-21  本文已影响0人  小贤笔记

注: 文章摘自 juan26 - 思否

压缩方式

前端压缩的方式很多，依赖java的有ant工具，前端自己打包压缩的有grunt，gulp，webpack，这些压缩也很重要，基本上能压缩50%以上，下面我们对压缩文件来个对比，如图所示

压缩原理

是不是每个浏览器都支持gzip呢? 如何知道客户端是否支持gzip呢?

那么怎么看有没有用gzip压缩的文件呢?

启用方式

前面说过了，启用 gzip 需要客户端和服务端的支持，如果客户端支持 gzip 的解析，那么只要服务端能够返回 gzip 的文件就可以启用 gzip 了，现在来说一下几种不同的环境下的服务端如何配置

node

node 端很简单，只要加上 compress 模块即可，代码如下

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

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

这是基本用法，如果还要对请求进行过滤的话，还要加上

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)
}

如果用的是 koa，用法和上面的差不多

const compress = require('koa-compress');
const app = module.exports = new Koa();
app.use(compress());

因为 node 读取的是生成目录中的文件，所以要先用 webpack 等其他工具进行压缩成 gzip，webpack 的配置如下
plugins 是 webpack 的插件
注: compression-webpack-plugin 版本2.x以下的话, 要将 filename 改为 asset

const CompressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(
  new CompressionWebpackPlugin({
    filename: '[path].gz[query]', // 目标文件名
    algorithm: 'gzip', // 使用 gzip 压缩
    test: new RegExp(
      '\\.(js|css)$' // 压缩 js 与 css
    ),
    threshold: 10240, // 资源文件大于 10240B = 10kB 时会被压缩
    minRatio: 0.8 // 最小压缩比达到 0.8 时才会被压缩
  })
);

tomcat

找到 tomcat 的 server.xml 文件，找到其中 Connector 节点然后进行配置修改，具体配置如下

<Connectorport="80"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true"compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>

参数说明：

注意：tomcat7 以后，js文件的 mimetype 类型变为了 application/javascript，而在 tomcat7 以下则为text/javascript; 具体的 tomcat7 定义的类型可以在 conf/web.xml 文件中找到

可以在 web.xml 下搜索，如我搜索 javascript 会找到如下代码

<mime-mapping>
  <extension>js</extension>
  <mime-type>application/javascript</mime-type>
</mime-mapping>

切记上面的类型不能配置错了，如果配置错了压缩是不会起作用的

nginx

gzip 使用环境: http, server, location, if(x), 一般把它定义在 nginx.conf 的 http{…..} 之间
可以插入到 http {...}整个服务器的配置里，也可以插入到虚拟主机的 server {...}或者下面的location模块内

上一篇 下一篇

猜你喜欢

热点阅读