解决Vditor加载Markdown网页很慢的问题(Vite+JS+Vditor)

1. 引言

在上一篇文章《使用Vditor将Markdown文档渲染成网页(Vite+JS+Vditor)》中，详细介绍了通过Vditor将Markdown格式文档渲染成Web网页的过程，并且实现了图片格式居中以及图片源更换的功能。不过，笔者发现在加载这个渲染Markdown网页的时候特别慢，本文就总结一下这个问题。

2. 详论

2.1 解决方案

经过笔者的调试发现，性能损耗主要是Vditor使用的一个依赖库文件lute.min.js加载很慢，这个文件大概有3.6M大小，并且放在了远端在线资源上。lute.min.js是一个Markdown引擎，Vditor默认是将其放到CDN上，具体使用的就是Cloudflare（传说中的赛博活佛）。理论上就是因为资源文件比较大才需要使用CDN，但是因为一些原因Cloudflare在国内的连接速度并不快。所以没办法，这里还是得将这些资源地址改回成域内，除非你有自己的CDN。

在Vditor官方论坛上找了类似的问题^[1]，回帖指出需要按照官方的开发指南^[2]进行CDN参数配置，如下所示：

具体来说，就是在Vditor.preview接口中增加cdn的配置：

Vditor.preview(document.getElementById("md-content"), demoMd, {
    cdn: window.location.origin,    //配置CDN
    markdown: {
    toc: false,
    mark: true, //==高亮显示==
    footnotes: true, //脚注
    autoSpace: true, //自动空格，适合中英文混合排版
    },
    math: {
    engine: "KaTeX", //支持latex公式
    inlineDigit: true, //内联公式可以接数字
    },
    hljs: {
    style: "github", //代码段样式
    lineNumber: true, //是否显示行号
    },
    anchor: 2, // 为标题添加锚点 0：不渲染；1：渲染于标题前；2：渲染于标题后
    lang: "zh_CN", //中文
    theme: {
    current: "light", //light,dark,light,wechat
    },
    transform: (html) => {
    // 使用正则表达式替换图片路径，并添加居中样式及题注
    return html.replace(
        /<img\s+[^>]*src="\.\/([^"]+)\.([a-zA-Z0-9]+)"\s*alt="([^"]*)"[^>]*>/g,
        (match, p1, p2, altText) => {
        // const newSrc = `${backendUrl}/blogs/resources/images/${postId}/${p1}.${p2}`;
        const newSrc = `${p1}.${p2}`;
        const imgWithCaption = `
                <div style="text-align: center;">
                    <img src="${newSrc}" class="center-image" alt="${altText}">
                    <p class="caption">${altText}</p>
                </div>
                `;
        return imgWithCaption;
        }
    );
    },
});

同时，还需要进行项目的配置，让这个前端项目能找到托管的CDN资源。根据开发指南的说明，托管的CDN资源不仅仅只有lute.min.js，还有其他资源文件，因此需要将这些文件都拷贝到特定的目录。那么就需要修改项目的配置，增加一个执行拷贝任务的脚本。

2.2 开发环境

不过由于拷贝文件的指令在不同的平台终端是不同的，因此最好引入一个中间件帮助统一一下指令的行为。这里使用Shx，它可以帮助我们在npm环境中跨平台执行类似于Unix样式的指令。在终端安装Shx：

npm install shx --save-dev

修改package.json：

{
  "name": "my-native-js-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "copy:vditor": "shx mkdir -p dist && shx cp -r node_modules/vditor/dist/* dist",
    "dev": "vite",
    "build": "vite build --emptyOutDir",
    "preview": "vite preview"
  },
  "devDependencies": {
    "shx": "^0.4.0",
    "vite": "^6.3.5"
  },
  "dependencies": {
    "handlebars": "^4.7.8",
    "vditor": "^3.11.0"
  }
}

增加的脚本copy:vditor具体就是指令：

npm run copy:vditor

具体意思就是创建目录dist，然后将目录node_modules/vditor/dist中的所有文件复制到这个dist目录中。然后正常执行dev指令：

npm run dev

理论上copy:vditor指令是可以合并到dev指令中的，也就是每次dev之前都执行copy:vditor。不过笔者还是觉得将其作为一次性命令更好，可以让程序启动得更快。

2.3 发布环境

我们知道，如果要正式发布项目的话，就需要先进行构建：

npm run build

然后再发布：

npm run preview

因此拷贝资源操作的脚本可以合并到build这一步中。这里，笔者介绍另外一种配置项目方法，就是使用Vite的配置文件vite.config.js。package.json是Web项目的基础配置文件；vite.config.js则是Vite的配置文件，用于自定义Vite的行为：例如配置服务器端口、代理，插件支持以及环境变量等等。这里就在项目根目录新建一个vite.config.js文件，内容如下：

// vite.config.js
import { defineConfig } from "vite";
import copy from "rollup-plugin-copy";

export default defineConfig(() => {
  return {
    server: {
      host: "0.0.0.0", // 绑定所有网络接口
      port: 8000, // 自定义开发服务器端口
      open: true, // 自动打开浏览器
    },
    build: {
      rollupOptions: {
        plugins: [
          copy({
            targets: [{ src: "node_modules/vditor/dist/*", dest: "dist/dist" }],
            hook: "writeBundle", // 在 writeBundle 阶段执行复制操作
          }),
        ],
      },
    },
    preview: {
      host: "0.0.0.0", // 绑定所有网络接口
      port: 8001, // 预览服务器端口
      open: true, // 自动打开浏览器
    },
  };
});

在这里的配置中，server字段和preview字段分别定义了开发模式dev和发布模式preview的网络地址和端口，并且设置执行完成后自动打开默认浏览器。build字段则配置在打包（rollup）代码的时候，通过插件rollup-plugin-copy执行拷贝操作，将目录node_modules/vditor/dist下的所有文件拷贝到dist/dist目录下。当然，插件rollup-plugin-copy需要进行安装：

npm install rollup-plugin-copy --save-dev

3. 结语

笔者这里开发模式和发布模式使用了两种不同的项目配置方法，来拷贝本地资源到特定目录。通过设置域内CDN，解决Vditor加载Markdown网页很慢的问题。理论上应该有更加优雅的方式，但是笔者这里是够用了，暂时不进行进一步研究。其实项目构建配置的问题没必要特意去学，首先还是要思考如何更方便地构建项目，自然而然就会去尝试解决方案，慢慢就学会项目构建配置的技能了。

---

1. 最近使用 vditor，遇到一个问题，请求 lute.min.js 的 cdn 总是请求不通导致 markdown 用不了怎么处理 ︎

2. Vditor 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式 ︎