V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
quehei
V2EX  ›  前端开发

[问题] 使用 nextjs 开发的网站图片资源加载较慢

  •  
  •   quehei ·
    Gzx97 · 102 天前 · 847 次点击
    这是一个创建于 102 天前的主题,其中的信息可能已经有所发展或是发生改变。

    网站打开首次加载图片比较慢( 1 、2m 的图片都要加载一阵,不知道是网卡还是服务卡),我去找大哥咨询是不是服务器的性能不够,他说是因为我使用的 nextjs 开发的,虽然在 public 里但是资源是 node 给的所以慢,想要优化要换换成 oss 这种,没法优化。我不知道这种说法是否合理。(因为本身大哥不太支持使用 nextjs 开发公司官网,然后开发完只能交给他来部署,使用的 k8s )

    6 条回复    2024-08-08 21:19:28 +08:00
    yier4ha
        1
    yier4ha  
       102 天前
    浏览器控制台网络那个 tab 里面找到加载慢的图片,点开看看加载时间,是等待服务器响应耗时太多了还是下载内容耗时太多了?
    我猜是下载内容耗时多。因为我本地开发的时候大图都是秒开的
    shiny
        2
    shiny  
       102 天前
    看你用的什么标签加载图片,如果是 next/image ,首次加载的时候还会有图片优化的过程。你也可以直接 build 出纯静态的网站。node 本身并不慢。
    seeu2ex
        3
    seeu2ex  
       102 天前 via iPhone
    换 cdn 中不中
    wunonglin
        4
    wunonglin  
       102 天前   ❤️ 1
    1 、静态图片的话可以自行压缩
    2 、在对象存储的话,那么用云服务
    3 、对象存储没用云服务的话,那么可以搭配 imgproxy 以及 varnish-cache 。链条是:minio -> imgproxy -> varnish-cache -> client
    Nosub
        5
    Nosub  
       102 天前 via iPhone
    1 ,2MB 的图片,是否已经压缩,不应该压缩后的 10-100kb 左右吗,浏览器有开发者工具,哪个慢,点击哪个,然后分析原因。
    Memoriae
        6
    Memoriae  
       102 天前   ❤️ 1
    1.不用 next/image ,直接引用/public ,修改 cdn 缓存规则,交给 cdn 完成;
    2.next/image 自定义 loader 功能就能适配 oss ;
    3.和 node 无关,你可以开 f12 开发者工具,看下渲染的顺序,next.js 的图片好像默认是延迟(优先度不是最高的)。

    官方文档的说明应该足以解决。

    https://nextjs.org/docs/app/building-your-application/optimizing/images
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1387 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:43 · PVG 07:43 · LAX 15:43 · JFK 18:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.