vuepress-theme-plume/docs/notes/theme/guide/构建优化.md

title, icon, createTime, permalink

title	icon	createTime	permalink
构建优化	clarity:bundle-solid	2024/09/10 01:50:20	/guide/optimize-build/

图片优化

当我们在 markdown 中使用 [alt](url) 或者 <img src="url"> 嵌入图片后，虽然页面按照预期的显示了 图片。

由于图片的体积不同，当图片体积较小，网络情况良好的时候，我们不会感受到页面的布局有产生明显的抖动。 然而，当图片体积较大，或者网络情况较差时，由于图片为完成加载，原本页面上应该显示图片的位置被后面的 内容挤压，等到图片加载完成后，页面布局会发生变化，图片重新占据应该显示的位置，其它的内容被排开。

事实上这个体验相当不友好。特别是对于页面内的图片数量较多时，页面会频繁发生布局变化，这一过程还可能 感知到卡顿，较为明显的是布局的抖动。

因此，让页面布局稳定下来，图片是一个必须解决的问题。

从 MDN > img 我们可以知道：

::: info <img> 同时包括 height 和 width 使浏览器在加载图像之前计算图像的长宽比。 此长宽比用于保留显示图像所需的空间，减少甚至防止在下载图像并将其绘制到屏幕上时布局的偏移。 减少布局偏移是良好用户体验和 Web 性能的主要组成部分。 :::

因此，主题围绕这个问题，提供了 一个解决方案：

为 markdown 文件中的 [alt](url) 或者 <img src="url"> 自动添加 width 和 height 属性。

你可以通过配置 markdownPower 来启用它：

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      markdownPower: {
        imageSize: true, // 'local' | 'all'
      },
    }
  })
})

启用此功能后，主题会通过图片资源地址，获取图片的原始尺寸，然后为图片添加 width 和 height 属性。

• 如果设置为 'local'， 则仅为 本地图片添加 width 和 height 属性。
• 如果设置为 'all'， 则包括 本地图片 和 网络图片 都 添加 width 和 height 属性。
• 如果设置为 true， 则等同于 'local'

::: important 请注意，出于性能考虑，即使您启用了此功能，该功能也仅在 构建生产包时生效。 :::

::: important 请谨慎使用 'all' 选项，该选项会在构建生产包时，请求所有 markdown 中包含的 远程图片资源， 这对于包含较多图片资源的站点而言，会使得构建时间变长。

主题也针对此类情况做了优化，请求远程图片仅在获取 几 KB 的数据包足够分析尺寸后不再等待请求完成， 同时并发请求其他图片资源。这在一定程度上能够改善构建时间。 :::

::: details 还有其他方案吗？ 事实上有的，当前的方案其实是一个折中的方案。

我考虑过使用 thumbhash 为图片生成缩略图，通过 占位图 和 懒加载 等技术方案实现更为平滑优雅的图片加载体验。

然而这是有代价的，这需要使用的 sharp 或 canvaskit 等图片处理库，对图片进行处理分析， 再通过 thumbhash 生成大概 20byte 大小的缩略图。这需要花费更多的时间， 这可能对于用户而言是不可接受的。 :::