利用 npm 和公共 CDN 托管文件，加速你的博客访问！

最近在折腾博客速度优化，发现浏览器控制台里总有几个文件加载得特别慢——尤其是那些体积不小的字体文件😔。想起来之前看过安知鱼大佬关于 npm 图床的文章，思路很赞。于是琢磨着：不如把文件丢到 npm 上托管，再用个靠谱的 CDN 镜像加速引入，这不就快起来了？

PixPin_2025-07-08_15-36-12

实践下来效果不错，操作也不复杂，记录下步骤供参考：

操作步骤

  1. 注册npm账号

  2. 切换回原生源

    1
    npm config set registry https://registry.npmjs.org

  3. 在电脑终端里登录npm

    1
    2
    3
    4
    # 仅第一次使用需要添加用户，之后会提示你输入你的npm账号密码以及注册邮箱
    npm adduser
    # 非第一次使用直接登录即可，之后会提示你输入你的npm账号密码以及注册邮箱
    npm login

    ​ 按 CTRL + 单击在浏览器中打开登录页面，登录即可

  4. 把你想托管的文件（比如字体、图片）放进一个文件夹，在这个文件夹里打开终端，执行初始化命令：

    1
    npm init

    命令行会问你包名、版本号等信息，一路敲回车用默认值也完全 OK。

  5. 然后输入发布指令，我们就可以把包发布到 npm 上了。

    1
    npm publish

    ​ 在npm官网中也能看到我们发布的文件

加速镜像

文件在 npm 上了，怎么高速引入你的博客呢？试试这些公共 CDN 镜像服务吧！直接把下面链接里的占位符换成你的包信息就行：

1
2
3
4
5
6
#JSDMirror 全球cdn 速度快
https://cdn.jsdmirror.com/npm/npm/:package@:version/:file
#elemecdn 更新慢，部分包缺少
https://npm.elemecdn.com/:package@:version/:file
#Staticfile（七牛云） 同步cdnjs
https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}