前端性能优化实践之 GZIP http2（6）1、Gzip 经典且实用如何配置 Nginx 启动 Gzip ? ngn

`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;

        }

    }