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]](#[1])，回帖指出需要按照官方的开发指南[[2]](#[2])进行CDN参数配置，如下所示：
具体来说，就是在Vditor.preview接口中增加cdn的配置：
js
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：
shell
npm install shx --save-dev修改package.json：
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具体就是指令：
shell
npm run copy:vditor具体意思就是创建目录dist，然后将目录node_modules/vditor/dist中的所有文件复制到这个dist目录中。然后正常执行dev指令：
shell
npm run dev理论上copy:vditor指令是可以合并到dev指令中的，也就是每次dev之前都执行copy:vditor。不过笔者还是觉得将其作为一次性命令更好，可以让程序启动得更快。
2.3 发布环境
我们知道，如果要正式发布项目的话，就需要先进行构建：
shell
npm run build然后再发布：
shell
npm run preview因此拷贝资源操作的脚本可以合并到build这一步中。这里，笔者介绍另外一种配置项目方法，就是使用Vite的配置文件vite.config.js。package.json是Web项目的基础配置文件；vite.config.js则是Vite的配置文件，用于自定义Vite的行为：例如配置服务器端口、代理，插件支持以及环境变量等等。这里就在项目根目录新建一个vite.config.js文件，内容如下：
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需要进行安装：
shell
npm install rollup-plugin-copy --save-dev3. 结语
笔者这里开发模式和发布模式使用了两种不同的项目配置方法，来拷贝本地资源到特定目录。通过设置域内CDN，解决Vditor加载Markdown网页很慢的问题。理论上应该有更加优雅的方式，但是笔者这里是够用了，暂时不进行进一步研究。其实项目构建配置的问题没必要特意去学，首先还是要思考如何更方便地构建项目，自然而然就会去尝试解决方案，慢慢就学会项目构建配置的技能了。