解决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的配置：

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

复制代码

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

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

1. npm install shx --save-dev

复制代码

修改package.json：

1. {
2.   "name": "my-native-js-app",
3.   "private": true,
4.   "version": "0.0.0",
5.   "type": "module",
6.   "scripts": {
7.     "copy:vditor": "shx mkdir -p dist && shx cp -r node_modules/vditor/dist/* dist",
8.     "dev": "vite",
9.     "build": "vite build --emptyOutDir",
10.     "preview": "vite preview"
11.   },
12.   "devDependencies": {
13.     "shx": "^0.4.0",
14.     "vite": "^6.3.5"
15.   },
16.   "dependencies": {
17.     "handlebars": "^4.7.8",
18.     "vditor": "^3.11.0"
19.   }
20. }

复制代码

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

1. npm run copy:vditor

复制代码

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

1. npm run dev

复制代码

理论上copy:vditor指令是可以合并到dev指令中的，也就是每次dev之前都执行copy:vditor。不过笔者照旧以为将其作为一次性下令更好，可以让步伐启动得更快。
2.3 发布环境

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

1. npm run build

复制代码

然后再发布：

1. npm run preview

复制代码

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

1. // vite.config.js
2. import { defineConfig } from "vite";
3. import copy from "rollup-plugin-copy";
5. export default defineConfig(() => {
6.   return {
7.     server: {
8.       host: "0.0.0.0", // 绑定所有网络接口
9.       port: 8000, // 自定义开发服务器端口
10.       open: true, // 自动打开浏览器
11.     },
12.     build: {
13.       rollupOptions: {
14.         plugins: [
15.           copy({
16.             targets: [{ src: "node_modules/vditor/dist/*", dest: "dist/dist" }],
17.             hook: "writeBundle", // 在 writeBundle 阶段执行复制操作
18.           }),
19.         ],
20.       },
21.     },
22.     preview: {
23.       host: "0.0.0.0", // 绑定所有网络接口
24.       port: 8001, // 预览服务器端口
25.       open: true, // 自动打开浏览器
26.     },
27.   };
28. });

复制代码

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

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

复制代码

3. 结语

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

---

   

• 近来使用 vditor，遇到一个题目，请求 lute.min.js 的 cdn 总是请求不通导致 markdown 用不了怎么处置惩罚 ↩︎
  
• Vditor 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式 ↩︎