# 背景

js、css、图片等静态资源在每次网络请求占用不少时间,考虑使用cdn进行加速,找到了jsdelivr,它可以自动加速github资源的访问,并且可以免费使用,只需要很简单的操作就可以在vuepress用上。

# 操作方法

下面例子,我只对图片、js、css进行了加速。在config.js中插入如下代码即可。

//加速静态资源
configureWebpack: () => {
  return {
    output: {
      publicPath: 'https://cdn.jsdelivr.net/gh/srcrs/srcrs.github.io@gh-pages/docs/'
    },
    resolve: {
      alias: {
        'docs': path.resolve(__dirname, './docs'),
      }
    }
  }
}

# 解释

  • https://cdn.jsdelivr.net 代表网站根目录

  • gh 代表github,应该也可以对其他代码托管网站加速资源访问

  • srcrs 代表github用户名

  • srcrs.github.io 代表仓库名

  • gh-pages 代表仓库中的哪个分支

  • docs/ 代表具体的目录

# 结果

静态资源加速效果明显,体验更加好了,又能愉快的看博客、写博客了。

# 后续

pwa会导致博客内容更新速度很慢,上传了很久都没有弹出更新按钮,故在删除这一功能。