为VuePress项目尝试加入CDN的尝试

内容纲要

背景

前一篇文章中我谈到如何修改vue.config.js为Vue-CLI项目添加CDN,实现为静态资源加速的目标。

考虑到VuePress静态资源为数也不少,因此也尝试为其打包的结果做一下CDN。

目标

尽可能将静态资源请求到CDN上

正文

通过研究VuePress的文档,官方并没有向Vue-CLI那样提供一个path使得静态资源重定向到目标的URL。

之前在网上也有issue提到关于CDN加速的问题,官方也没有给出相关的解决方法。


于是考虑设计一套workaround方案,研究生成的目标文件中的内容。

不难发现,在docs/.vuepress/dist/assets/js/app.*.js文件中,对象a下的属性p(即a.p)给定了所有js文件的prefix。

因此可以考虑设计脚本,在编译完成后批量替换。

另外,文档中会涉及到许多的html文件中的静态资源的替换。因此可以考虑将html文件使用cheerio读入DOM,批量替换link。

CUP Online Judge Docs为例

#!/bin/bash
WEBPATH="https://cdn.jsdelivr.net/gh/CUP-ACM-Programming-Club/CUPACM-Docs-CDN@v$(cat VERSION)/"
if [[ "$OSTYPE" == "darwin"* ]]; then
sed -i "" "s|a.p=\"/\"|a.p=\"$WEBPATH\"|g" docs/.vuepress/dist/assets/js/app.*.js
sed -i "" "s|/assets/img/|$WEBPATH/assets/img/|g" docs/.vuepress/dist/assets/css/*.css
else
sed -i  "s|a.p=\"/\"|a.p=\"$WEBPATH\"|g" docs/.vuepress/dist/assets/js/app.*.js
sed -i  "s|/assets/img/|$WEBPATH/assets/img/|g" docs/.vuepress/dist/assets/css/*.css
fi
node .github/shell/build_cdn_environment.js
const glob = require("glob");
const fs = require("fs");
const path = require("path");
const cheerio = require("cheerio");
const version = fs.readFileSync("VERSION");
const webPath = `https://cdn.jsdelivr.net/gh/CUP-ACM-Programming-Club/CUPACM-Docs-CDN@v${version}`;

function rewriteSrc (element, $, attr) {
    element.each(function () {
        const src = $(this).attr(attr);
        if (src.indexOf("http") !== -1) {
            return;
        }
        $(this).attr(attr, webPath + src);
    })
}

function writeSrc (element, $, dir) {
    element.each(function () {
        const src = $(this).attr("src");
        if (src.indexOf("http") !== -1) {
            return;
        }
        $(this).attr("src", webPath + path.join(dir, src));
    })
}

function loadFile() {
    const htmlFileList = glob.sync(`docs/.vuepress/dist/**`)
        .filter(name => {
            return fs.lstatSync(name).isFile()
        })
        .filter(name => {
            return name.substring(name.length - 5) === '.html';
        });
    htmlFileList.forEach(filePath => {
        const content = fs.readFileSync(filePath, "utf-8");
        const $ = cheerio.load(content);
        const script = $("script");
        const css = $("link");
        rewriteSrc(script, $, "src");
        rewriteSrc(css, $, "href");
        writeSrc($("img"), $, path.dirname(filePath).replace("docs/.vuepress/dist", ""));
        fs.writeFileSync(filePath, $.html());
    });
}

loadFile();

关于发布CDN的过程,可参考上一篇文章,这里略过不提。

设计一个Github Actions的step

      - name: Build distribution
        run: |
          npm i
          npm run docs:build
          ./.github/shell/after_build.sh

即可完成上面的工作。

以上即完成了CDN静态资源的工作。然而,仍有少数资源没有完成全部的替换,可根据build_cdn_environment.js的格式,编写替换规则。

存在的问题

通过上面的方法可以解决大部分资源走CDN,但是html文件必须直接访问服务器。

对于服务器速度本身就比较慢的情况,比如说Github Pages,可考虑使用DNS做境内境外不同的CNAME,境内使用Coding Pages,境外使用Github Pages,简单设置Actions,将dist推到两个仓库即可。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇