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

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` 将 **双斜杠** 视为代码示例的预处理器。
 因此，所有的标记都是在 `//` 之后添加的。

docs/notes/theme/guide/代码/介绍.md

@@ -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`** 。
 :::
 
 ## 语言

docs/notes/theme/guide/构建优化.md

@@ -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 万 个图标。
@@ -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+ 个` 时，所带来的 直观感受是
+__不应该花费这么长的时间的__ ，因此，缓存这部分的图标资源是一个很好的选择。
+:::

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