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