前端性能优化实践之 GZIP http2（6）

1、Gzip 经典且实用

• 如何配置 Nginx 启动 Gzip ?

1、mac 安装 homebrew https://brew.sh/
 2、安装 nginx brew i nginx
 3、
复制代码

• ngnix 基本启动停止  www.kancloud.cn/sxlcjqq/int…
  
• 查看路径
  

• 然后 就可 看到配置文件 端口
  
• 然后将自己打包的 build 文件夹 放到 nginx 服务器上， 此处 需要将打包 build 放在一个位置，然后 nginx 配置 找到这个地方
  

• 然后 wq 保存退出

• 刷新页面 localhost:80 非常nice ！

• 当前我们看一下  没有压缩的 大小 主要看 bundle.js 文件

• 接下来 就是 配置一下 Gzip 压缩  

• 这个地方 容易敲错 导致不生效 放出来

gzip_disable "msie6";
    gzip_comp_level 6;
    gzip_min_length 1100;
    gzip_proxied any;
    gzip_types
       text/plain
       text/css
       text/js
       text/xml
       text/javascript
       application/javascript
       application/x-javascript
       application/json
       application/xml
       application/rss+xml
       image/svg+xml/javascript;
       gzip_static on;
    gzip_vary on;
    gzip_buffers 4 16k;
    gzip_http_version 1.1;
复制代码

• 压缩后 bundle.js 文件大小 ,非常 nice的进行了 压缩 ！

• 还有一个问题 brew-core 有问题 解决一下
  
• 安装时 出现 这个问题 怎么解决
  网络异常，图片无法展示

  |
  
  
• 这直接输入这个git config --global --unset http.proxy
  
• 问题解决 非常 nice ～
  

2、启用 keep-alive  ？ 参数：设置超时时长和最大请求数

• 可以在两个地方 看到这个详细的信息

1、network
 2、终端 命令行 curl -v http://127.0.0.1:80 可以看到请求返回的详细信息
复制代码

• network
  

• 终端 命令行

• 我们需要 在 nignx 配置一下

• timeout：指定了一个空闲连接需要保持打开状态的最小时长（以秒为单位）
  
• requests：在连接关闭之前，在此连接可以发送的请求的最大值
  

3、http 资源缓存 ？ （重要 蛮多 ）

• 更多 信息可以看这个 developer.mozilla.org/en-US/docs/…
  
• 这个就当是 复习了，重点是 如何才 nginx 配置， 以及重要的参数
  

• 重要的部分html 一般进行协商缓存/不缓存，用户需要拿到最新的资源 ， js/css 需要进行缓存

• nginx 如何 配置 这个地方 暂时不敲了，配置之后 可看到 对应的缓存时间

• Google 会使用 serviceworker  来帮助缓存

4、 service workers ?

• 离线存储资源，使得离线后还可访问，会存在 客户端，常规只存储基本的 js css html , 不要存储 mp4 大图片

• 尝试使用 它

create-react-app.dev/docs/making…

直接在 index.js 更改一下配置

• 详细 原理部分 后续 补上

5、 http2 的升级 ?

• 适合场景

• 知乎 挺多的 h2

• 对比 http1 http2 有什么优势？

1、安全性 h1采取文本传输方式 h2 采取二进制传输方式
  2、多路复用，可以同时发起/接受多个请求
  3、server push 
复制代码

1 server push

2 多路复用

3 二进制传输

4 头部压缩

• 多说一句 https

• 如何生成一个 自己的个人签名证书  ssl 证书？

敲下面这几个命令

// 辅助得到私钥
openssl genrsa -des3 -passout pass:x -out server.pass.key 2048
// 得到私钥
openssl rsa -passin pass:x -in server.pass.key -out server.key 
// 生成 csr
openssl req -new -key server.key -out server.csr 
openssl x509 -req -sha256 -days 3650 -in server.csr -signkey server.key -out server.crt 
复制代码

• 敲完之后 就可得到这个

• 需要找到 位置 为下面配置 准备 直接在文件搜索 名称就可拿到 然后时间排序一下
  
• 如何配置 nginx 实现 http2 ?
  

#
    server {
        listen       443 ssl http2;
        server_name  localhost;
        ssl on;
        ssl_certificate      /Users/fhj/Desktop/server/server.crt;
        ssl_certificate_key  /Users/fhj/Desktop/server/server.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
        location / {
            root   /Users/fhj/Desktop/build;
            index  index.html index.htm;
        }
    }
复制代码

• 有个小插曲

• 页面效果展示  成功使用了 h2 非常的开心 ！！！

• 当然 重点应该是 看 请求数量和速度 ，不过 因为本地 demo 很简单，并不能看出 明显提升，技术实验场景也非常重要 ～

6、服务端渲染  SSR ?

• 好处

• 客户端 服务端渲染 对比

• 适合场景

• 可以使用 next.js  nextjs.org/docs/gettin…
  
• 此处就不敲了，写的方式和 react 相同