目 录CONTENT

文章目录

Vercel+WebpServer实现对Halo博客图片压缩

恪晨
2022-11-16 / 0 评论 / 1 点赞 / 18 阅读 / 553 字 / 正在检测是否收录...
温馨提示:
慢慢看,慢慢读,不行就边听歌边读

前言

  在使用Halo博客上传附件后,有时候因为图片太大导致页面加载很慢,我们可以使用webp server进行对上传图片的压缩。

安装webp server

因为我依然用的是群晖上面的docker,因此这里讲在群晖docker上安装webp server,当然其他平台安装也都是大同小异的。

  • 在Docker注册表搜索webpsh/webp-server-go进行下载
  • 配置文件映射路径,/opt/pics映射到本地的图片地址,这里我用的web_packages就是halo文件所在的目录
  • 这个目录下面有一个upload文件夹就是专门存图片相关的附件的,这里我们不要设置到upload目录,设置到它halo根目录就好了,因为后面会在vercel中配置/upload的代理地址
    image-1668566134161
  • 配置端口,根据自己的情况映射端口即可
    image-1668566314816
  • 设置环境变量,环境变量中有个ALLOWED_TYPES,设置为["jpg","png","jpeg","svg","gif"],就是你要转的图片类型,设置完成后启动即可。

对webp server进行代理

  在群晖中设置反向代理,将内网服务代理到公网,当然这里是需要你的宽带是公网IP的。
image-1668567030421

配置vercel代理

  同上一篇文章中说的的方式一样,需要在json文件中增加一条代理,这里我的webp server的服务地址是https://nas.wangboweb.site:3334,所以将访问/upload时的全部代理到这个地址就好了,然后再执行一次verceL -A web.json --prod重新部署一下即可。

{
    "version": 2,
    "routes": [
      {
        "src": "/favicon.ico",
        "headers": { "Cache-Control": "public, max-age=3600" },
        "continue": true
      },
      {"src": "/upload/(.*.(jpg|jpeg|gif|png|svg))", "dest": "https://nas.wangboweb.site:3334"},
      {"src": "/(.*)","dest": "https://nas.wangboweb.site:9201"}
    ]
}

结语

  通过以上方式,我们就实现了将网站访问图片进行了压缩,加快了网站打开的速度。
image-1668567331301

1

评论区