传输优化
@ 姜波 | 星期四,九月 10 日,2020 年 | 1 分钟阅读 | 更新于 星期四,九月 10 日,2020 年

启用压缩Gzip

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件小于设置值的文件将不会压缩
gzip_min_length 1k;
# 优化压缩过程
gzip_buffers 4 16k;
# 使用http版本
gzip_http_version 1.1;
# gzip 压缩级别1-10数字越大压缩的越好也越占用CPU时间一般设置1和2
gzip_comp_level 2;
# 进行压缩的文件类型javascript有多种形式其中的值可以在 mime.types 文件中找到
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

启用Keep Alive

# 关闭Keep Alive默认开启
# keepalive_timeout 0;
# 超时时间65s关闭Keep Alive
keepalive_timeout 65;
# 100个请求后关闭Keep Alive
keepalive_requests 100;

HTTP资源缓存

Cache-Control/Expires

Last-Modified + If-Modified-Since

Etag + If-None-Match

Service Workers

  • 加速重复访问
  • 离线支持

webpack插件

  • WorkboxWebpackPlugin
  • ManifestPlugin

注意

  • 延长了首屏时间,但页面总加载时间减少
  • 兼容性
  • 只能在localhost或https下使用

HTTP/2的性能提升

  • 二进制传输
  • 请求响应多路复用
  • Server push

服务端渲染SSR

  • Next
  • Nuxt

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接