解决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]](#[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-dev

3. 结语

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


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

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

相关推荐
Fly-ping6 小时前
【前端】JavaScript 的事件循环 (Event Loop)
开发语言·前端·javascript
在逃的吗喽7 小时前
黑马头条项目详解
前端·javascript·ajax
JHCan3338 小时前
一个没有手动加分号引发的bug
前端·javascript·bug
天涯学馆9 小时前
为什么越来越多开发者偷偷用上了 Svelte?
前端·javascript·svelte
拾光拾趣录9 小时前
为什么浏览器那条“假进度”救不了我们?
前端·javascript·浏览器
香菜狗9 小时前
vue3响应式数据(ref,reactive)详解
前端·javascript·vue.js
油丶酸萝卜别吃10 小时前
SSE与Websocket有什么区别?
前端·javascript·网络·网络协议
276695829210 小时前
拼多多小程序 anti_content 分析
java·javascript·python·node·拼多多·anti-content·anti_content
The_era_achievs_hero10 小时前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
rzl0211 小时前
SpringBoot6-10(黑马)
linux·前端·javascript