logo科技微讯

Next.js export 如何进行图片优化

作者:科技微讯
日期:2022-05-12
📝 笔记

NextJS 支持使用 next export 生成完全静态的网页,可以部署在 GitHub Pages、云开发静态网站等服务,不需要后端服务器。优点是更利于 SEO、提高用户访问速度、可把网站上传到差不多任何地方。

next export 有一些限制,例如不能使用 getServerSideProps、不支持 next/image 自带的 image optimization(需要 custom loader 进行图片优化)等。

注意这里说的 image optimization 只是 next/image 其中一个功能点,是指面对不同的设备提供不同尺寸、大小、格式的图片。其他功能点还包括 lazy-loaded、prevent layout shift、保持 aspect ratio、支持 placeholder 等,所以这里说 next export 不支持 next/image 默认的图片优化,并不是说它不支持 next/image 其他功能点。

这个笔记主要说说 next export 的图片优化,注意 next export 是支持图片优化的,只是开发者要自定义优化方法(custom loader),不能使用 next.js 内置的优化方法(default loaders、built-in loaders)。

更新:Next.js 13 升级了 next/image 组件,取消了 built-in loaders。

NextJS 默认的 image optimization 和 GatsbyJS 的不一样,前者是在用户访问带有图片的页面时,实时(on demand)进行图片优化,而后者则是在 npm run build 时就提前进行了图片优化,生成多种尺寸和格式的图片,如果图片较多,build 耗时往往较高,我这个博客以前就用 GatsbyJS,无法忍受 build 耗时才转到 NextJS。

next/image does not perform image optimization during the build (next build). Instead, it optimizes images on-demand. This was done to prevent extremely long build times when optimizing many images.

next/image 组件支持传入 loader 属性,或在 next.config.js配置 loaderFile。从文档来看,loader 有 3 种

  • default loader:无需任何配置,默认采用的图片优化方法,它会对本地或网络图片进行优化,serves them directly from the Next.js web server;
  • built-in loader:Imgix、Vercel 等,serve your images directly from a CDN or image server;
  • custom loader:开发者自己写的 loader;

更新:Next.js 13 取消了 built-in loader,所谓的 built-in loader 其实都是第三方服务的 loader,以后要想使用第三方服务进行图片优化,都要写成 custom loader。

next export 只支持 custom loader,那 custom loader 怎么写呢?

loader 是一个函数,配置了 loader 后,next/image 会把图片的 src、width、height 等信息传入这个函数,开发者在撰写 custom loader 时,可以根据传入的参数生成一个或多个新的图片 url 从而完成图片优化,当不同的设备请求你的图片时,next.js 会看情况提供不同的图片 url,比如是同一张图片的不同尺寸或不同格式。

这个 GitHub 帖子讨论了 next export 可以使用外部服务优化图片,也可以直接在 custom loader 中返回原始的 scr 链接从而不对图片进行任何优化,但 next/image 一些其他优点还是会保留,例如 lazy laoding 等。

donation赞赏
thumbsup0
thumbsdown0
暂无评论