Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf(plugin-md-power): add unset languages warning #251

Merged
merged 1 commit into from
Oct 3, 2024
Merged

perf(plugin-md-power): add unset languages warning #251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/notes/theme/guide/代码/twoslash.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ permalink: /guide/markdown/experiment/

### 概述

[twoslash](https://shikijs.github.io/twoslash/) 是一种 `javascript` 和 `typescript` 标记语言。
[twoslash](https://twoslash.netlify.app/) 是一种 `javascript` 和 `typescript` 标记语言。
你可以编写一个代码示例来描述整个 `javascript` 项目。

`twoslash` 将 **双斜杠** 作为 代码示例的预处理器。
Expand Down Expand Up @@ -109,7 +109,7 @@ const a = 1

### 语法参考

完整语法请参考 [ts-twoslasher](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher) 和 [shikijs-twoslash](https://shikijs.github.io/twoslash/)
完整语法请参考 [ts-twoslasher](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher) 和 [shikijs-twoslash](https://twoslash.netlify.app/)

`twoslash` 将 **双斜杠** 视为代码示例的预处理器。
因此，所有的标记都是在 `//` 之后添加的。
Expand Down
9 changes: 9 additions & 0 deletions docs/notes/theme/guide/代码/介绍.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,15 @@ export default defineUserConfig({
})
```

---

<Badge type="warning" text="v1.0.0-rc.105 更新" />
随着 `shiki` 支持的语言越来越丰富，默认加载全部的语言所花费的时间越来越多了，
因此 **强烈建议您 手动配置 `languages`** ，仅加载 您需要的 语言。

同时，在您未配置 `languages` 时，主题会在启动时尝试分析 `markdown` 文件中的代码块所使用的语言，
并将它们作为 `languages` 传入给 shiki，这也极大的减少了加载时间。然而随着 项目 `markdown` 文件数量和内容的增长，
这种方式带来额外的 i/o 开销和解析开销也会越来越长，因此 **强烈建议您手动配置 `languages`** 。
:::

## 语言
Expand Down
28 changes: 17 additions & 11 deletions docs/notes/theme/guide/构建优化.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,17 +64,6 @@ export default defineUserConfig({
同时并发请求其他图片资源。这在一定程度上能够改善构建时间。
:::

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

## 图标优化

得益于 开源项目 [iconify](https://icon-sets.iconify.design/) 的强大，您可以在主题内使用大约 20 万 个图标。
Expand All @@ -84,3 +73,20 @@ export default defineUserConfig({

但请放心，主题仅会加载您有使用到的图标资源，这包括 导航栏、侧边栏、首页 Features 等配置中的 iconify 图标，
以及通过语法糖 `:[collect:name]:` 和 组件 `<Icon name="icon_name" />` 等各种方式使用的图标。

当从本地 `@iconify/json` 中加载图标时， iconify 通过 `[collect]:[name]` 的形式为图标命名，其中根据
`collect` 来区分图标所属的集合，每个集合拥有 100 ~ 1000+ 数量不等的图标，保存在以 `collect` 为维度的 `json`
文件中。当文档使用了比较多的不同的 `collect` 下的图标时，即使从本地加载和解析 `json`，也需要花费比较长的时间，
以主题站点为例，主题使用了 __54 个collect__ 超过 __160+ 个图标__, 在初始启动时，在图标解析加载大约需要耗费 `500ms`
的时间开销，这显然是难以接受的。

针对这种情况，主题会在首次启动时，缓存有使用的图标资源，当二次启动时，优先从缓存中加载图标，由于仅缓存有使用的
图标资源，加载这部分资源远比 频繁解析不同 `collect` 下的图标资源要快的多，且资源利用率更高。

其时间开销从 `500ms` 减少到了 `20ms` 甚至更低！这也进一步优化了 启动开发服务的时间！

::: info
使用 __54 个collect__ 下的图标资源 这种情况相对来说比较极端，这也意味着 54 次的 i/o 读取和 json 解析，
花费 `500ms` 的时间开销也算是正常，然而实际使用的图标数量仅 `160+ 个` 时，所带来的 直观感受是
__不应该花费这么长的时间的__ ，因此，缓存这部分的图标资源是一个很好的选择。
:::
5 changes: 4 additions & 1 deletion plugins/plugin-shikiji/src/node/shikiPlugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type {
PreWrapperOptions,
} from './types.js'
import { isPlainObject } from 'vuepress/shared'
import { colors } from 'vuepress/utils'
import { copyCodeButtonPlugin } from './copy-code-button/index.js'
import { highlight, scanLanguages } from './highlight/index.js'
import {
Expand Down Expand Up @@ -55,8 +56,10 @@ export function shikiPlugin({

if (!options.languages || !options.languages.length) {
options.languages = await scanLanguages(app)
if (options.languages.length) {
logger.warn(`You have not configured \`${colors.cyan('plugins.shiki.languages')}\`. It has been detected that you are using \`${colors.green(JSON.stringify(options.languages))}\`. Please add it to the \`${colors.cyan('plugins.shiki.languages')}\` configuration.`)
}
if (app.env.isDebug) {
logger.info(`scan languages: ${JSON.stringify(options.languages)}`)
logger.info(`scan languages in: ${(performance.now() - start).toFixed(2)}ms`)
}
}
Expand Down