76 lines
3.5 KiB
Markdown
76 lines
3.5 KiB
Markdown
---
|
||
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` 大小的缩略图。这需要花费更多的时间，
|
||
这可能对于用户而言是不可接受的。
|
||
:::
|