1.0.0-rc.73 至 rc.77 更新说明

1272 字约 4 分钟

2024-07-11

近期的这几个版本主要围绕 实现单独的主题配置文件 ，监听并支持热更新。

Breaking Changes

以下内置插件被移除：

移除 @vuepress-plume/plugin-blog-data 插件
移除 @vuepress-plume/plugin-notes-data 插件
移除 @vuepress-plume/plugin-auto-frontmatter 插件

以上插件的功能全部移动到 vuepress-theme-plume 主题包内部重新实现。原因是，单独的主题配置文件，在异步加载完配置、以及配置热更新时，需要对这些插件所实现的功能进行重载，为了使流程更加清晰可控，在主题内重新实现了这些功能，并移除了相关插件。

但相关的配置项并没有发生变更，因此版本更新后用户无需修改配置。

主要更新

新增主题配置文件

一般我们在使用 VuePress 构建站点时，通常会在 .vuepress/config.js 中引入主题并进行主题配置：

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    // 主题配置
  }),
})

主题配置通常会包括如导航栏、侧边导航栏、多语言相关等的配置。当我们启动了 VuePress 服务后，对 .vuepress/config.js 的修改会引起 VuePress 服务的重启，这对于 VuePress 相关的配置而言是合理的行为。

但对于主题相关的配置而言，大部分的配置更新是没有必要重启 VuePress 服务的。特别是当我们频繁的更新主题配置时，还可能引起 VuePress 服务崩溃，这对于我们在编写站点内容时带来的体验是非常糟糕的。

因此，主题新增了一个 plume.config.js 的主题配置文件，将主题配置进行单独的维护。该配置文件主要用于管理主题配置中与构建流无关的配置。你对他的任意修改，都将以热更新的方式，更新主题，并同步到客户端站点实现无刷新更新，完全避免了 VuePress 服务多次重启的问题。

你可以直接在 VuePress 配置文件的相同目录下直接创建 plume.config.js ，主题会自动加载该文件，也可以使用 plume.config.ts 文件，以获取更好的类型提示。

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme()
})

.vuepress/plume.config.ts

import { defineThemeConfig } from 'vuepress-theme-plume'

export default defineThemeConfig({
  // 主题配置
})

新增编译缓存

VuePress 在每次启动时，都需要全量编译所有的 markdown 文件，在站点内容比较少，且内容不复杂时，这一过程不算特别耗时，但是当站点的内容越来越多，内容越来越复杂时，启动等待的时间就会变得越来越久。

以本主题的文档站点为例，虽然主题文档的内容并不算特别多，但是由于使用了 shiki 语法高亮，并支持了 twoslash 功能，由于 twoslash 需要对代码块进行类型编译，非常耗时，这导致主题文档站点的启动时间达到了夸张的 15s 以上！

为了缓解这一问题，主题对 markdown 文件的编译做了一层缓存，在首次启用 VuePress 服务时，主题会对所有的 markdown 文件的编译结果进行缓存，在二次启动时，直接从缓存中读取 markdown 文件的编译结果。且仅在 markdown 文件有发生变更时，才会重新编译。

通过编译缓存，主题文档站点的启动耗时，从 15s 降低到了 1.2s 左右！

另一方面， markdown 编译过程中耗时较为严重的是对 代码块 的编译，特别是代码块使用了 twoslash 时。主题原来的 15s 耗时主要就是由于 twoslash 的编译时间过长导致的。

主题同样对代码块进行了特殊的缓存处理，只有当代码块发生变化时，才会重新编译当前的代码块。

新增 autoFrontmatter 配置

在过去的版本，主题会自动为每个 markdown 文件添加了 frontmatter 配置，用户无法更改这个行为，但部分用户可能不喜欢这一行为、或者只想给部分 markdown 文件添加 frontmatter 配置、或者只生成部分的 frontmatter 配置。

为此，主题添加 autoFrontmatter 配置，用于控制是否自动为每个 markdown 文件添加 frontmatter 配置。包括可以通过 glob 模式匹配过滤 markdown 文件，控制自动生成哪些字段。

interface AutoFrontmatterOptions {
  /**
   * glob 匹配，被匹配的文件将会自动生成 frontmatter
   *
   * @default ['**\/*.md']
   */
  include?: string | string[]

  /**
   * glob 匹配，被匹配的文件将不会自动生成 frontmatter
   */
  exclude?: string | string[]

  /**
   * 是否自动生成 permalink
   *
   * @default true
   */
  permalink?: boolean
  /**
   * 是否自动生成 createTime
   *
   * 默认读取 文件创建时间，`createTitme` 比 vuepress 默认的 `date` 时间更精准到秒
   */
  createTime?: boolean
  /**
   * 是否自动生成 title
   *
   * 默认读取文件名作为标题
   */
  title?: boolean
}