加速 Github Pages 访问速度的几种方法
jsDelivr 加速博客静态文件加载 (CDN 加速)
- config.js 内配置 configureWebpack
// config.js
module.exports = {
configureWebpack: (config, isServer) => {
if (process.env.NODE_ENV === "production") {
// 修改正式环境的静态文件地址
config.output.publicPath = "jsdelivr地址";
}
},
};
加速图片等博客素材 (参考 [Github + jsDelivr + PicGo 免费图床](/blogs/web/jsDelivr mianfeituchuang.html))(当前博客已弃用该方案)
- config.js 配置
// config.js
module.exports = {
themeConfig: {
jsdelivrUrl: "jsdelivr地址",
},
};
- md (markdown) 使用
<img :src="`${$themeConfig.staticUrl}/pageImg/200924/4.png`">
更优的 jsDelivr 加速博客图片等素材(当前博客使用的方案)
- 通过 markdown-it-replace-link 来修改生成 html 文件内容的图片素材
安装 markdown-it-replace-link
npm i markdown-it-replace-link -D
配置 config.js
// config.js
// 图片判断,且不为网络图片
const judgeImg = (link) => {
return (
!link.startsWith("http") && (link.endsWith(".jpg") || link.endsWith(".png"))
);
};
module.exports = {
markdown: {
lineNumbers: true,
extendMarkdown: (md) => {
md.use(require("markdown-it-replace-link"), {
replaceLink: (link, end) => {
// 修改非网络图片的地址路径
return judgeImg(link) ? `jsDelivr地址前缀${link}` : link;
},
});
},
},
};
md 文件使用,引用图片

例如:

alias 引用本地静态文件(注:自建服务器,且图片本地化时可使用该方案)
- config.js 内配置 chainWebpack 配置别名 (只能配置本地地址,无法配置网络地址)
// config.js
module.exports = {
chainWebpack: (config) => {
// public/ 为项目本地静态文件地址
config.resolve.alias.set("@imgs", path.resolve(__dirname, "public/"));
},
};
- md (markdown) 使用

Powered by Waline v2.15.8