解決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網頁很慢的問題。理論上應該有更加優雅的方式，但是筆者這里是夠用了，暫時不進行進一步研究。其實項目構建配置的問題沒必要特意去學，首先還是要思考如何更方便地構建項目，自然而然就會去嘗試解決方案，慢慢就學會項目構建配置的技能了。
浙公網安備 33010602011771號