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`) } }