网站优化

2024-05-05vuetifywebfont加载nginx网站优化gzip

前言

之前搞得一个个人网站，因为是用 vue3 + vuetify + vite 搞的，所以打包出来的文件特别大。每次进发现都好慢，打开性能分析居然要 8.88 秒，有时候要 11 秒，这谁顶得住。

分析与优化

分析一下 timing，发现大头是 webfont 的加载占大头，阻塞 js 执行 6s 多。

设置 cloudflare 缓存好像也不顶用，还是慢。换 cdn 试试

<link
  rel="preload"
  as="style"
  onload="this.rel='stylesheet'"
  href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" />

发现不阻塞 js 执行，一下子就能干到 2s 内。

然后再对关键资源做一下服务器压缩与缓存，我用的是 nginx，做 gzip 压缩，开启缓存。

http {
  ...
  gzip on;
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  gzip_http_version 1.1;
  gzip_comp_level 4;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; # 压缩的MIME类型
  gzip_vary on;
  gzip_proxied expired no-cache no-store private auth;
  gzip_disable "MSIE [1-6]\.";
  ...
  server {
    ...
    # assets, media
    location ~* \.(?:css(\.map)?|js(\.map)?|jpe?g|png|gif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {
      expires 7d;
    }
 
    # svg, fonts
    location ~* \.(?:svgz?|ttf|ttc|otf|eot|woff2?)$ {
      add_header Access-Control-Allow-Origin "*";
      expires 7d;
    }
    ...
  }
 
}

可以看到资源有了一定压缩，速度也快了不少。