加速 Github Pages 访问速度的几种方法

MuYan2020-10-16webGitHub 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 文件使用,引用图片

![alt 属性文本](除jsDelivr地址前缀以外的图片绝对路径)

例如:
![alt 属性文本](200924/5.png)

alias 引用本地静态文件(注:自建服务器,且图片本地化时可使用该方案)

  • config.js 内配置 chainWebpack 配置别名 (只能配置本地地址,无法配置网络地址)
// config.js
module.exports = {
  chainWebpack: (config) => {
    // public/ 为项目本地静态文件地址
    config.resolve.alias.set("@imgs", path.resolve(__dirname, "public/"));
  },
};
  • md (markdown) 使用
![别名引用图片](~@imgs/image.png)
上次更新 2026/6/23 11:49:15
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8