Vuepress 使用 CDN 优化 gh-pages 加载速度

众所周知，github 在国内访问极不稳定，有时候加载速度极慢，致使国内用户体验极差。
个人 Vuepress 博客网站恰好是托管在 gh-pages 上，因此就想优化访问速度，让页面更加顺滑。

优化方案

下面优化博客加载速度的一些方案：

• 优化打包代码文件大小
• 压缩加载资源文件大小
• 减小 http 请求次数
• 采用 cdn 加速

由于 Vuepress 是静态博客，并且 Vuepress 自己会优化打包代码文件大小，因此如今方向是压缩图片等资源文件大小，而且使用 cdn 加速。

使用 CDN 加速

免费的 jsDelivr CDN 自然支持 Github 仓库的加速，那么如何使用呢？

以个人博客仓库为例，仓库地址是 https://github.com/jwchan1996/blog。
其中，仓库资源能够经过 https://cdn.jsdelivr.net/gh/jwchan1996/blog + 仓库文件路径 直接访问。

好比：https://cdn.jsdelivr.net/gh/jwchan1996/blog/README.md

默认是访问 master 分支下的资源，若是须要访问其余分支的资源，须要指定分支：

# master分支
https://cdn.jsdelivr.net/gh/jwchan1996/blog@master/README.md

# gh-pages分支
https://cdn.jsdelivr.net/gh/jwchan1996/blog@gh-pages/logo.png

配置 Vuepress

下面分别是 Vuepress 编译前的博客源码与编译后的目录截图：

master 分支

gh-pages 分支

咱们的目的是部署博客代码到 gh-pages 的时候使用 cdn 资源路径，而本地开发依然采用本地路径。

那么，如何配置呢？

找到 config.js 配置文件的 configureWebpack 配置：

module.exports = {
  title: '飘香豆腐的博客',
  …
  …
  configureWebpack: {
    
  }
}

其中 configureWebpack 是用于修改 Vuepress 内部的 Webpack 配置的，能够是一个对象，也能够是一个函数，而后返回一个对象。

由于咱们须要作环境判断是开发环境仍是生产环境，因此咱们使用函数配置。

const path = require('path')

module.exports = {
  …
  …
  configureWebpack: () => {
    const NODE_ENV = process.env.NODE_ENV
    //判断是不是生产环境
    if(NODE_ENV === 'production'){
      return {
        output: {
          publicPath: 'https://cdn.jsdelivr.net/gh/jwchan1996/blog@gh-pages/'
        },
        resolve: {
          //配置路径别名
          alias: {
            'public': path.resolve(__dirname, './public') 
          }
        }
      }
    }else{
      return {
        resolve: {
          //配置路径别名
          alias: {
            'public': path.resolve(__dirname, './public') 
          }
        }
      }
    }
  }
}

此时咱们 markdown 文件里面图片路径仍是这样的：

![gitlab 503](/docker/docker_gitlab_restore/02.png)

这样编译出来的的 html 文件图片路径依然是 /docker/docker_gitlab_restore/02.png，由于没有识别图片为 Webpack 模块，因此没有添加任何路径前缀。

要想添加前缀，修改 markdown 文件图片地址便可，添加 Webpack 配置好的路径别名前缀：

![gitlab 503](~public/docker/docker_gitlab_restore/02.png)

这样全部 markdown 文件的图片都会被打包到 assets 目录下，如 /assets/img/02.706d49fc.png

同时 html 文件的图片路径也会加上配置的 publicPath 前缀：

# 打包后的CDN地址
https://cdn.jsdelivr.net/gh/jwchan1996/blog@gh-pages/assets/img/02.706d49fc.png

# 打包后的html文件图片标签
<img src="https://cdn.jsdelivr.net/gh/jwchan1996/blog@gh-pages/assets/img/02.706d49fc.png" alt="gitlab 503">

到此 Vuepress 的配置就完成了，将代码 push 到 github 仓库，等待自动化部署后，能够发现访问速度明显地提高了许多，顺滑许多！

具体访问体验可参考 https://jwchan.cn