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

## 图片优化 <Badge type="warning" text="试验性" />

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

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

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

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

从 [MDN > img](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#height) 我们可以知道：

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

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

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

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

```ts
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](https://github.com/evanw/thumbhash) 为图片生成缩略图，通过 占位图 和 懒加载
等技术方案实现更为平滑优雅的图片加载体验。

然而这是有代价的，这需要使用的 [sharp](https://github.com/lovell/sharp) 或 [canvaskit](https://github.com/google/skia/tree/main/modules/canvaskit) 等图片处理库，对图片进行处理分析，
再通过 [thumbhash](https://github.com/evanw/thumbhash) 生成大概 `20byte` 大小的缩略图。这需要花费更多的时间，
这可能对于用户而言是不可接受的。
:::