http缓存及http2配置

http缓存及http2配置极大提高了网页加载得速度

1.1 nginx安装

首先是需要安装nginx 去官网下载windows版本的安装包

nginx 命令

nginx start //启动
nginx -s stop
nginx -s reload // 重新运行
tasklist /fi "imagename eq nginx.exe" //进程

把打包好的文件copy到nginx文件得html目录下

1.2nginx 启用gzip压缩

http {

// 其他配置

gzip on;

gzip_min_length 1k; //超过1k就压缩

gzip_comp_level 6;

gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/json; //需压缩文件得类型

gzip_buffers 4 16k;

gzip_vary on;

gzip_http_version 1.1;

server {

}

}

配置完成后 nginx -s reload 重新启动服务

输入curl -v http://localhost:80可查看到http得版本或者在控制台也可以

配置详情

1.3启用http keep-alive

就是对tcp链接进行复用，http1.1默认开启了，可看到其他请求未有tcp链接减少网络开销

额外配置

keepalive_timeout 65; //65s后会关闭掉
keepalive_requests 100; //请求超过多少就关闭

1.4启用http缓存

第二种和第三种差不多现在主要用第三种；第二种有坑这里客服端得得时间和服务器的时间会不同

配置：

server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
try_files $uri /index.html;
if ($request_filename ~* .*\.(?:htm|html)$) // 不缓存html
{
add_header Cache-Control "no-cache, must-revalidate";
add_header "Pragma" "no-cache";
add_header "expires" "no-cache";
}
if ($request_filename ~* .*\.(?:js|css)$)
{
expires 7d; // 过期时间7天根据需求可适当延长时间这不是主要的我们在webpack上用hash做了配置的更新后也会让旧文件缓存失效
}
if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$)
{
expires 7d;
}
}
}

1.5 service workers技术没有网络也可访问网站

每个框架都有对应的实现方式可自行查看

1.6 开启http2

http2优化点

1.多路复用同个时刻多个请求并发成一个请求

2.服务器推送重要的资源提前推送到客服端这些资源就不需要请求了

1安装openssl

去官网下载安装即可OpenSSL官方下载 - 码客，再配置系统环境变量

2 生成测试ssl证书，正式的ssl证书是需要付费的

openssl genrsa -des3 -passout pass:x -out server.pass.key 2048

openssl rsa -passin pass:x -in server.pass.key -out server.key

openssl req -new -key server.key -out server.csr

openssl x509 -req -sha256 -days 3650 -in server.csr -signkey server.key -out server.crt

配置

http {

server {

listen 443 ssl http2;

server_name localhost;

# ssl on;

location / {

root html;

index index.html index.htm;

try_files $uri /index.html;

}

ssl_certificate /Users/Admin/Downloads/ssl/server.crt; //路径根据实际调整

ssl_certificate_key /Users/Admin/Downloads/ssl/server.key;

ssl_session_cache shared:SSL:1m;

ssl_session_timeout 5m;

ssl_ciphers HIGH:!aNULL:!MD5;

ssl_prefer_server_ciphers on;

# http2_push static/img/loginimg.jpg // 服务端推送

}

}