diff --git a/docs/notes/theme/guide/代码/twoslash.md b/docs/notes/theme/guide/代码/twoslash.md
index cb3b32ac..a55bb2e8 100644
--- a/docs/notes/theme/guide/代码/twoslash.md
+++ b/docs/notes/theme/guide/代码/twoslash.md
@@ -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` 将 **双斜杠** 作为 代码示例的预处理器。
@@ -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` 将 **双斜杠** 视为代码示例的预处理器。
因此,所有的标记都是在 `//` 之后添加的。
diff --git a/docs/notes/theme/guide/代码/介绍.md b/docs/notes/theme/guide/代码/介绍.md
index 678b4a87..4a88331a 100644
--- a/docs/notes/theme/guide/代码/介绍.md
+++ b/docs/notes/theme/guide/代码/介绍.md
@@ -30,6 +30,15 @@ export default defineUserConfig({
})
```
+---
+
+
+随着 `shiki` 支持的语言越来越丰富,默认加载全部的语言所花费的时间越来越多了,
+因此 **强烈建议您 手动配置 `languages`** ,仅加载 您需要的 语言。
+
+同时,在您未配置 `languages` 时,主题会在启动时尝试分析 `markdown` 文件中的代码块所使用的语言,
+并将它们作为 `languages` 传入给 shiki,这也极大的减少了加载时间。然而随着 项目 `markdown` 文件数量和内容的增长,
+这种方式带来额外的 i/o 开销和解析开销也会越来越长,因此 **强烈建议您手动配置 `languages`** 。
:::
## 语言
diff --git a/docs/notes/theme/guide/构建优化.md b/docs/notes/theme/guide/构建优化.md
index cb38b7ca..d44b63f2 100644
--- a/docs/notes/theme/guide/构建优化.md
+++ b/docs/notes/theme/guide/构建优化.md
@@ -64,17 +64,6 @@ export default defineUserConfig({
同时并发请求其他图片资源。这在一定程度上能够改善构建时间。
:::
-
-
## 图标优化
得益于 开源项目 [iconify](https://icon-sets.iconify.design/) 的强大,您可以在主题内使用大约 20 万 个图标。
@@ -84,3 +73,20 @@ export default defineUserConfig({
但请放心,主题仅会加载您有使用到的图标资源,这包括 导航栏、侧边栏、首页 Features 等配置中的 iconify 图标,
以及通过语法糖 `:[collect: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+ 个` 时,所带来的 直观感受是
+__不应该花费这么长的时间的__ ,因此,缓存这部分的图标资源是一个很好的选择。
+:::
diff --git a/plugins/plugin-shikiji/src/node/shikiPlugin.ts b/plugins/plugin-shikiji/src/node/shikiPlugin.ts
index 8d85d839..ab21f3e0 100644
--- a/plugins/plugin-shikiji/src/node/shikiPlugin.ts
+++ b/plugins/plugin-shikiji/src/node/shikiPlugin.ts
@@ -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 {
@@ -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`)
}
}